01 Aug 2024 - Matthias Voigt
Das Hervorheben von Code-Syntax ist ein wichtiger Aspekt für Blogs und Websites, die technische Inhalte präsentieren. Es verbessert die Lesbarkeit und Verständlichkeit des Codes. In diesem Beitrag zeige ich, wie man Syntax-Highlighting auf einer Jekyll-Seite einrichtet.
Bevor wir beginnen, stelle sicher, dass du Jekyll auf deinem System installiert hast und ein Jekyll-Projekt eingerichtet ist.
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.
Öffne deine _config.yml Datei und stelle sicher, dass die folgende Zeile enthalten ist:
highlighter: rouge
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!");
}
}
```
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">
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.
Syntax-Highlighting ist eine großartige Möglichkeit, den Lesern deiner technischen Blogposts das Verständnis deines Codes zu erleichtern. Mit Jekyll und Rouge ist es einfach, schöne und gut lesbare Code-Blöcke zu erstellen. Viel Spaß beim Coden und Bloggen!
Bildquelle: Beispielbilder von Jekyll und Rouge