Contao 5.7 - Das Code Highlighting ändern

Mit dem Inhaltselement Code kannst man im Frontend schick formatierten Code ausgeben.

Das Standard-Template content_element/code lädt für die Darstellung eine CSS-Datei namens foundation.css. Das ist aber nicht die einzige Option, es stehen über 90 CSS-Dateien aus dem Paket scrivo/highlight.php zur Verfügung, welches bei der Installation von Contao mit installiert wird.

Das Twig-Template content_element/code

Werfen wir einen Blick auf dasTwig-Template für Code:

{% extends '@Contao/content_element/_base.html.twig' %}
{% use '@Contao/component/_stylesheet.html.twig' %}

{% block content %}
    {% if as_editor_view %}
        {% block editor_view %}<pre>{{ code }}</pre>{% endblock %}
    {% else %}
        {% block highlighted %}
            {# @var \Contao\CoreBundle\Twig\Runtime\HighlightResult highlighted #}
            {% set highlighted = code|highlight(language) %}
            {% set code_attributes = attrs()
                .addClass('hljs')
                .addClass(highlighted.language)
                .mergeWith(code_attributes|default)
            %}
            <pre><code{% block code_attributes %}{{ code_attributes }}{% endblock %}>
                {{- highlighted.value|raw -}}
            </code></pre>
        {% endblock %}
    {% endif -%}
{% endblock %}

{% block style %}
    {% add 'highlighter_css' to stylesheets %}
        {% with {file: highlighter_css_file|default(asset('foundation.css', 'scrivo/highlight.php'))} %}
            {{ block('stylesheet_component') }}
        {% endwith %}
    {% endadd %}
{% endblock %}

Im Block style wird das CSS zum Highlighting geladen, die betreffende Zeile ist:

{% with {file: highlighter_css_file|default(asset('foundation.css', 'scrivo/highlight.php'))} %}

Das CSS ändern

Zum Ändern des CSS erstelle man im Template Studio ein eigenes Template von content_element/code und tausche die CSS-Datei aus.

{# ocean.css statt foundation.css laden #}
{% block style %}
    {% add 'highlighter_css' to stylesheets %}
        {% with {file: highlighter_css_file|default(asset('ocean.css', 'scrivo/highlight.php'))} %}
            {{ block('stylesheet_component') }}
        {% endwith %}
    {% endadd %}    
{% endblock %}

oder für eine eigene CSS-Datei:

{% block style %}
    {% add 'highlighter_css' to stylesheets %}
        {% with {file: highlighter_css_file|default(asset('layout/css/chalk.css', 'contao_vfs.files'))} %}
            {{ block('stylesheet_component') }}
        {% endwith %}
    {% endadd %}    
{% endblock %}

Welche CSS-Dateien gibt es?

Viele! Zu finden in jeder Contao-Installation unter vendor/scrivo/highlight.php/styles

  • a11y-dark.css
  • a11y-light.css
  • agate.css
  • an-old-hope.css
  • androidstudio.css
  • arduino-light.css
  • arta.css
  • ascetic.css
  • atelier-cave-dark.css
  • atelier-cave-light.css
  • atelier-dune-dark.css
  • atelier-dune-light.css
  • atelier-estuary-dark.css
  • atelier-estuary-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-plateau-dark.css
  • atelier-plateau-light.css
  • atelier-savanna-dark.css
  • atelier-savanna-light.css
  • atelier-seaside-dark.css
  • atelier-seaside-light.css
  • atelier-sulphurpool-dark.css
  • atelier-sulphurpool-light.css
  • atom-one-dark-reasonable.css
  • atom-one-dark.css
  • atom-one-light.css
  • brown-paper.css
  • codepen-embed.css
  • color-brewer.css
  • darcula.css
  • dark.css
  • darkula.css
  • default.css
  • docco.css
  • dracula.css
  • far.css
  • foundation.css
  • github-gist.css
  • github.css
  • gml.css
  • googlecode.css
  • gradient-dark.css
  • grayscale.css
  • gruvbox-dark.css
  • gruvbox-light.css
  • hopscotch.css
  • hybrid.css
  • idea.css
  • ir-black.css
  • isbl-editor-dark.css
  • isbl-editor-light.css
  • kimbie.dark.css
  • kimbie.light.css
  • lightfair.css
  • magula.css
  • mono-blue.css
  • monokai-sublime.css
  • monokai.css
  • night-owl.css
  • nord.css
  • obsidian.css
  • ocean.css
  • paraiso-dark.css
  • paraiso-light.css
  • pojoaque.css
  • purebasic.css
  • qtcreator_dark.css
  • qtcreator_light.css
  • railscasts.css
  • rainbow.css
  • routeros.css
  • school-book.css
  • shades-of-purple.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
  • vs2015.css
  • xcode.css
  • xt256.css
  • zenburn.css

Für viele der Styles kann man sich zum Beispiel unter https://highlightjs.org/demo eine Demo angucken. Beispielcode eingeben und eins der Themes dort wählen.

Auf dieser Seite wird die CSS-Datei chalk.css verwendet. Diese wird in Contao nicht mitgeliefert.

Zurück

Kommentare

Einen Kommentar schreiben

Bitte rechnen Sie 6 plus 5.