Contao - das Code Highlighting ändern

Mit dem Inhaltselement Code kannst Du im Frontend schick formatierten Code ausgeben. Dafür musst Du im Seitenlayout das js_highlight-Template einbinden.

Mit diesem Template wird der Syntaxhighlighter highlight.js mit dem Style Foundation geladen. Die aktuelle Version von highlight.js hat über 90 Styles, so dass man das Aussehen des hervorgehobenen Codes nach seinem Gusto ändern kann. Wie das in Contao geht, beschreibe ich hier.

Das js_highlight-Template

Werfen wir einen Blick auf das js_highlight-Template:

<?php

// Add the highlight style sheet
$GLOBALS['TL_CSS'][] = 'assets/highlight/css/foundation.css|static';

?>

<script src="<?= $this->asset('js/highlight.min.js', 'contao-components/highlight') ?>"></script>
<script>hljs.initHighlightingOnLoad()</script>

In Zeile 4 wird das CSS für das Highlighting geladen: assets/highlight/css/foundation.css. Du musst allerdings nicht diese CSS-Datei verwenden, denn Contao liefert 46 (!) davon mit, die sich alle in demselben Ordner befinden:

  • arta.css
  • ascetic.css
  • atelier-dune-dark.css
  • atelier-dune-light.css
  • atelier-forest-dark.css
  • atelier-forest-light.css
  • atelier-heath-dark.css
  • atelier-heath-light.css
  • atelier-lakeside-dark.css
  • atelier-lakeside-light.css
  • atelier-seaside-dark.css
  • atelier-seaside-light.css
  • codepen-embed.css
  • color-brewer.css
  • dark.css
  • default.css
  • docco.css
  • far.css
  • foundation.css
  • github.css
  • googlecode.css
  • hybrid.css
  • idea.css
  • ir-black.css
  • kimbie.dark.css
  • kimbie.light.css
  • magula.css
  • mono-blue.css
  • monokai-sublime.css
  • monokai.css
  • obsidian.css
  • paraiso-dark.css
  • paraiso-light.css
  • railscasts.css
  • rainbow.css
  • solarized-dark.css
  • solarized-light.css
  • sunburst.css
  • tomorrow-night-blue.css
  • tomorrow-night-bright.css
  • tomorrow-night-eighties.css
  • tomorrow-night.css
  • tomorrow.css
  • vs.css
  • xcode.css
  • zenburn.css

The Easy Way

Alles, was Du machen musst, ist im Template die CSS-Datei auszutauschen. Guck Dir die in Contao verfügbaren Styles auf der highlight.js Webseite an, und wähle einen Style, der Dir gefällt. Das könnte z.B. Codepen Embed sein. Erstelle ein neues Template js_highlight.html5 im Template-Ordner (Deines Themes). Gib hier die andere CSS-Datei an:

<?php

// Add the highlight style sheet
// $GLOBALS['TL_CSS'][] = 'assets/highlight/css/foundation.css|static';
$GLOBALS['TL_CSS'][] = 'assets/highlight/css/codepen-embed.css|static';

?>

<script src="<?= $this->asset('js/highlight.min.js', 'contao-components/highlight') ?>"></script>
<script>hljs.initHighlightingOnLoad()</script>

The Not So Easy Way

Oder Du schreibst Deinen eigenen Style für Dein Code-Highlighting. Nimm Dir eine der CSS-Dateien, die Contao mitliefert (guckstduhier), als Grundlage und definiere Deinen eigenen Style. Die CSS-Anweisungen packst Du dann einfach in das CSS Deines Themes und kommentierst das CSS in der Templatedatei aus.

Zurück