Wie generiert man eine passende CSS-Datei für ein spezifisches Rouge-Theme?
Um eine CSS-Datei für ein bestimmtes Rouge-Theme zu generieren, nutzt man am einfachsten das Kommandozeilen-Tool rougify, das zusammen mit dem Ruby-Gem Rouge installiert wird.
Hier ist die Schritt-für-Schritt-Anleitung:
1. Rouge installieren
Falls du Rouge noch nicht installiert hast, kannst du dies über RubyGems tun:
gem install rouge2. Verfügbare Themes anzeigen
Bevor du ein CSS generierst, möchtest du vielleicht wissen, welche Themes es überhaupt gibt:
rougify help style(Dies listet alle verfügbaren Themes wie z.B. monokai, github, gruvbox, thankful_eyes etc. auf.)
3. Die CSS-Datei generieren
Der Befehl folgt diesem Schema:
rougify style [THEME_NAME] > [DATEINAME].css
Beispiel für das Theme "monokai":
rougify style monokai > syntax.css4. Wichtig: Den CSS-Scope (Präfix) festlegen
Standardmäßig generiert Rouge CSS-Regeln ohne umschließende Klasse oder mit einer Standardklasse. Wenn du Rouge in Jekyll oder einem anderen System nutzt, liegen die Code-Blöcke meistens innerhalb eines Containers wie .highlight.
Damit das CSS greift, solltest du den Selektor mit angeben:
rougify style monokai --scope .highlight > syntax.cssWas das bewirkt:
Anstatt nur .k { color: #f92672; } zu generieren, schreibt Rouge dann .highlight .k { color: #f92672; }. So verhinderst du, dass die Styles andere Elemente auf deiner Website beeinflussen.
5. Einbindung in HTML
Binde die generierte Datei einfach in den <head> deines HTML-Dokuments ein:
<link rel="stylesheet" href="syntax.css">Zusammenfassung der Optionen
--scope .deine-klasse: Setzt einen CSS-Präfix (sehr wichtig!).rougify style: Der Basisbefehl zum Erstellen von Stylesheets.
Pro-Tipp für Jekyll-Nutzer:
Jekyll nutzt Rouge standardmäßig. Wenn du wissen willst, welches Theme aktuell eingestellt ist, schaue in deine _config.yml unter highlighter: rouge. Du musst die CSS-Datei jedoch trotzdem manuell wie oben beschrieben generieren und in dein Projekt einfügen (meistens in /assets/css/).