Code¶

Die Syntaxhervorhebung übernimmt highlight.js. Die Bibliothek liegt im Theme (kern-ux/vendor/highlightjs), es wird kein CDN kontaktiert. Farbschema und Zusatzsprachen sind über hljs_style, hljs_style_dark und hljs_languages einstellbar; beim Umschalten auf dunkel wechselt auch das Farbschema.

Fläche, Rahmen und Abstand kommen weiterhin aus den KERN-Token – so passen Codeblöcke zum übrigen Design.

Inline¶

Ein Absatz mit mkdocs build --strict mittendrin.

Mit Sprache¶

from pathlib import Path


def kit_version(theme_dir: Path) -> str:
    """Liest die Version des gevendorten KERN-Kits."""
    version = theme_dir / "kern-ux" / "vendor" / "kern" / "VERSION"
    return version.read_text(encoding="utf-8").strip()

theme:
  name: kern-ux
  hljs_style: github
  hljs_style_dark: github-dark
  hljs_languages:
    - php

<?php

declare(strict_types=1);

/**
 * Liest die Version des gevendorten KERN-Kits.
 */
function kern_kit_version(string $themeDir): string
{
    $file = $themeDir . '/kern-ux/vendor/kern/VERSION';

    if (!is_readable($file)) {
        return 'unbekannt';
    }

    return trim((string) file_get_contents($file));
}

$version = kern_kit_version(__DIR__);
printf("KERN-Kit %s%s", $version, PHP_EOL);

npm run vendor:update && mkdocs build --strict -f demo/mkdocs.yml

Ohne Sprachangabe¶

Kein Sprachhinweis: highlight.js rät die Sprache.
Zwei Zeilen, damit die Zeilenhöhe sichtbar wird.

Sehr lange Zeile (scrollt und ist mit der Tastatur erreichbar)¶

Diese Zeile ist absichtlich sehr lang, damit der Codeblock horizontal scrollen muss und das Theme ihn als Region mit tabindex="0" auszeichnet, wie es WCAG 2.1.1 für scrollbare Bereiche verlangt.

Längerer Block¶

(function () {
  'use strict';

  var toggles = document.querySelectorAll('[data-kux-theme-toggle]');

  function effectiveTheme() {
    var attr = document.documentElement.getAttribute('data-kern-theme');
    if (attr === 'dark' || attr === 'light') {
      return attr;
    }
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  toggles.forEach(function (btn) {
    btn.addEventListener('click', function () {
      var next = effectiveTheme() === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-kern-theme', next);
      localStorage.setItem('kern-ux-theme', next);
    });
  });
})();

Serverseitige Hervorhebung

Wer codehilite oder pymdownx.highlight einsetzt, färbt bereits beim Bauen. Dann highlightjs: false setzen und ein Pygments-Stylesheet über extra_css einbinden – das Theme rührt vorgefärbte Blöcke nicht an.