Syntax-Highlighting mit Jekyll

Werkzeuge

Donnerstag, 01. August 2024 - Matt

Unformatierter Code in einem Blogbeitrag ist mühsam zu lesen. Nach dem Umzug auf Jekyll war das eines der ersten Dinge, die ich einrichten wollte.

Voraussetzungen

Vorausgesetzt wird eine funktionierende Jekyll-Installation und ein eingerichtetes Projekt.

Rouge installieren

Jekyll verwendet standardmäßig das Rouge-Gem für Syntax-Highlighting. Stelle sicher, dass es in deiner Gemfile enthalten ist:

gem "rouge"

Führe anschließend bundle install aus, um Rouge zu installieren.

Syntax-Highlighting aktivieren

Öffne deine _config.yml Datei und stelle sicher, dass die folgende Zeile enthalten ist:

highlighter: rouge

Einfügen von Code-Blöcken

Um Code-Blöcke in deinen Beiträgen hervorzuheben, verwende die folgende Syntax:

```language
Dein Code hier
```

Ersetze language durch die entsprechende Programmiersprache, z.B. ruby, python, javascript, etc.

Beispiel:

```csharp
public class HelloWorld
{
    public static void Main(string[] args)
    {
        Console.WriteLine("Hello, World!");
    }
}
```

Styling anpassen

Du kannst das Styling der hervorgehobenen Code-Blöcke anpassen, indem du eine CSS-Datei hinzufügst. Jekyll bietet verschiedene vorgefertigte Styles, die du verwenden kannst.

Erstelle eine Datei namens syntax.css im Verzeichnis assets/css und füge den gewünschten Style hinzu. Beispielsweise:

.highlight {
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
}

Füge anschließend die CSS-Datei in deine Layout-Dateien ein:

<link rel="stylesheet" href="{{ "/assets/css/syntax.css" | relative_url }}">

Prüfen und Anpassen

Baue deine Jekyll-Seite neu, indem du jekyll serve ausführst und überprüfe die Hervorhebung der Code-Blöcke. Passe das Styling nach Bedarf an, um die Lesbarkeit und das Design deiner Seite zu verbessern.

Fazit

Mit Rouge ist das in Jekyll schnell eingerichtet und braucht kein JavaScript im Browser: Das Highlighting passiert beim Bauen der Seite.

Weitere Ressourcen

Bildquelle: Beispielbilder von Jekyll und Rouge