Hugo und Syntax Highlighting

13. Juni 2019

In 2017 hatte ich es schon erwartet, seit Version 0.28 ist die Funktion mittlerweile vorhanden und heute habe ich mich darum gekümmert. Prinzipiell ist - wie so oft - alles in der Dokumentation beschrieben, aber zum leichteren Nachvollziehen, verliere ich ein paar Worte.

Unterm Strich wird aus

```C
int main (void)
{
	return 0;
}
```

mit der Hilfe des Shortcodes highlight folgendes.

{ { < highlight C "linenos=table,hl_lines=1 3-4,linenostart=3" > } }
int main (void)
{
    return 0;
}
{ { < / highlight > } }

Im Beispiel sind Leerzeichen eingefügt, da sonst selbst im <pre>-Block der Shortcode highlight ausgeführt wird. Ohne Leerzeichen sieht das dann so aus.

3
4
5
6
int main (void)
{
	return 0;
}

Da die Hervorhebung nun über CSS gehandhabt wird, kann zum einen die Hervorhebung mittels Javascript entfernt werden und zum anderen muss die entsprechende css-Datei erstellt werden. Das geht mit

hugo gen chromastyles --style=monokailight > static/css/syntax.css

wobei eine Fülle an Stilen zur Auswahl stehen.

Zu guter Letzt muss Hugo noch bzgl. dem Syntax Highlighting unterrichtet werden. Dazu müssen folgende drei Zeilen in die Konfigurationsdatei config.toml eingefügt werden.

pygmentsCodefences = true
pygmentsCodefencesGuessSyntax = true
pygmentsStyle = "monokailight"

Hugo statt jekyll

14. Juli 2017