Zum Inhalt springen

Erste Schritte

Installation

Shell
composer require shikiphp/shikiphp

shikiphp benötigt PHP 8.2 oder höher mit ext-json und ext-mbstring — beides ist in fast jedem PHP-Build aktiviert. Weitere Anforderungen gibt es nicht: weder Node noch eine native Oniguruma-Bindung oder zusätzliche Erweiterungen.

Dein erster Codeblock

Die statische Fassade Shikiphp ist der schnellste Einstieg. Übergib deinen Code, eine Sprach-ID und eine Theme-ID:

PHP
use Shikiphp\Shikiphp;

$html = Shikiphp::codeToHtml(<<<'PHP'
<?php
function greet(string $name): string {
    return "Hello, {$name}!";
}
PHP, [
    'lang'  => 'php',
    'theme' => 'github-dark',
]);

echo $html;

codeToHtml gibt einen vollständigen, eigenständig gestalteten <pre class="shiki …">-Block zurück. Vorder- und Hintergrundfarbe stehen direkt am <pre>, sodass die Darstellung ohne zusätzliches Stylesheet korrekt ist.

Dual-Themes (hell und dunkel)

Anstelle eines einzelnen theme übergib eine themes-Map. Wie Shiki gibt shikiphp CSS-Variablen aus, damit sich ein gerenderter Block an den hellen oder dunklen Modus anpasst:

PHP
use Shikiphp\Shikiphp;

$code = 'const answer: number = 42';

echo Shikiphp::codeToHtml($code, [
    'lang'   => 'ts',
    'themes' => ['light' => 'github-light', 'dark' => 'github-dark'],
]);

Standardmäßig dienen die Farben des Themes light als Inline-Vorgaben; dark wird über --shiki-dark-Variablen bereitgestellt. Aktiviere das dunkle Theme mit einer kleinen Menge CSS — demselben Codebeispiel, das Shiki dokumentiert:

CSS
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* and font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

Mit der Option defaultColor kannst du festlegen, welches Theme standardmäßig inline verwendet wird. Mit defaultColor: false werden nur Variablen ausgegeben.

Sprach-IDs und Aliase

Sprachen werden über ihre Shiki-ID oder einen Alias referenziert — php, ts, js, rust, python, html und so weiter. Unter Sprachen erfährst du, wie du alle mitgelieferten Sprachen auflistest. Die Theme-IDs findest du unter Themes.

Den Highlighter wiederverwenden

Die Fassade erstellt bei Bedarf einen mitgelieferten Highlighter und speichert ihn im Cache, sodass wiederholte Aufrufe von Shikiphp::codeToHtml dieselben Grammatik- und Theme-Caches wiederverwenden. Wenn du den umfangreicheren API benötigst (HAST-Ausgabe, benutzerdefinierte Grammatiken, Token-Raster), greif direkt auf die Instanz zu:

PHP
use Shikiphp\Shikiphp;

$code = 'fn main() {}';

$highlighter = Shikiphp::highlighter();
$hast = $highlighter->codeToHast($code, ['lang' => 'rust', 'theme' => 'nord']);

Die vollständige Schnittstelle findest du unter API.