Warum wird der Code trotz aktivem Rouge ohne Farben (nur als reiner Text) im Browser angezeigt?

Melden

Dass der Code trotz aktivem Rouge ohne Farben angezeigt wird, liegt in 95 % der Fälle daran, dass zwar die HTML-Struktur (die Klassen für Keywords, Strings etc.) generiert wird, aber das dazugehörige CSS-Stylesheet fehlt.

Rouge fügt dem Code lediglich HTML-Tags wie <span class="k">def</span> hinzu. Ohne eine CSS-Datei, die definiert, dass .k zum Beispiel blau sein soll, sieht der Text im Browser ganz normal aus.

Hier sind die häufigsten Ursachen und Lösungen:

1. Das CSS fehlt (Häufigste Ursache)

Rouge liefert standardmäßig kein CSS mit aus. Du musst ein Stylesheet generieren und in deine Website einbinden.

Lösung: Wenn du Rouge lokal installiert hast, kannst du ein Theme (z.B. "monokai" oder "github") in eine CSS-Datei exportieren:

rougetify style monokai.sublime > syntax.css

Anschließend musst du diese syntax.css in deinem HTML-Header verlinken:

<link rel="stylesheet" href="/path/to/syntax.css">

2. Konfiguration in der _config.yml (bei Jekyll)

Falls du Jekyll nutzt, muss Rouge explizit als Highlighter definiert sein.

Lösung: Prüfe deine _config.yml:

markdown: kramdown
highlighter: rouge
kramdown:
  input: GFM
  syntax_highlighter: rouge

3. Keine Sprachangabe im Code-Block

Rouge weiß nicht, wie es den Code highlighten soll, wenn du die Sprache nicht angibst.

Lösung: Verwende in Markdown die "Fenced Code Blocks" mit Sprachkürzel:

```python
def hallo_welt():
    print("Hallo")
```
Wenn dort nur ` ``` ` (ohne "python") steht, wird der Code oft nur als reiner Text behandelt.

4. Konflikt mit anderen Plugins

Manchmal überschreiben andere Plugins (z. B. für Copy-Buttons oder andere Markdown-Parser) die Klassen von Rouge oder verhindern das Highlighting.

Lösung: Untersuche den Code im Browser (Rechtsklick -> Untersuchen / Element prüfen).

  • Siehst du innerhalb des Codes <span>-Tags mit Klassen wie c1, k, nb?
    • Ja: Dann ist Rouge aktiv, aber das CSS fehlt (siehe Punkt 1).
    • Nein: Dann wird Rouge gar nicht erst auf den Text angewendet (Konfiguration prüfen).

5. Liquid-Tags vs. Backticks

In Jekyll/GitHub Pages gibt es zwei Wege. Manchmal funktioniert einer von beiden aufgrund der Konfiguration nicht:

  • Markdown-Weg: ```ruby ... ```
  • Liquid-Weg: {% highlight ruby %} ... {% endhighlight %}

Versuche testweise den jeweils anderen Weg.

Zusammenfassung: Überprüfe zuerst im Browser-Inspektor (F12), ob der Code-Block <span>-Elemente enthält. Wenn ja, fehlt dir nur eine CSS-Datei mit den Farbedefinitionen.