Aller au contenu

Premiers pas

Installation

Shell
composer require shikiphp/shikiphp

shikiphp nécessite PHP 8.2 ou une version ultérieure avec ext-json et ext-mbstring, activées dans presque toutes les compilations PHP. Rien d’autre : ni Node, ni liaison native Oniguruma, ni extension supplémentaire.

Votre premier bloc

La façade statique Shikiphp est le moyen le plus rapide de commencer. Transmettez votre code, un identifiant de langage et un identifiant de thème :

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 renvoie un bloc <pre class="shiki …"> complet, déjà stylisé. Les couleurs de premier plan et d’arrière-plan sont définies en ligne sur <pre> ; le rendu est donc correct sans feuille de style supplémentaire.

Deux thèmes (clair et sombre)

Au lieu d’un seul theme, transmettez une map themes. shikiphp génère des variables CSS (comme Shiki) afin qu’un même bloc rendu s’adapte aux modes clair et sombre :

PHP
use Shikiphp\Shikiphp;

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

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

Par défaut, les couleurs du thème light sont définies en ligne, et celles de dark sont exposées via des variables --shiki-dark. Activez le thème sombre avec un peu de CSS — le même extrait que documente Shiki :

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;
}

Vous pouvez choisir le thème dont les couleurs seront définies en ligne par l’option defaultColor, ou définir defaultColor: false pour générer uniquement des variables.

Identifiants de langage et alias

Les langages sont référencés par leur identifiant Shiki ou leur alias : php, ts, js, rust, python, html, etc. Consultez Langages pour savoir comment répertorier tous les langages fournis et Thèmes pour les identifiants de thème.

Réutiliser le moteur de coloration syntaxique

La façade crée et met en cache à la demande un moteur Highlighter fourni dans le bundle ; les appels répétés à Shikiphp::codeToHtml réutilisent donc les mêmes caches de grammaires et de thèmes. Pour accéder à la version plus complète API (sortie HAST, grammaires personnalisées, grilles de jetons), récupérez directement l’instance :

PHP
use Shikiphp\Shikiphp;

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

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

Consultez la API pour découvrir l’API complète.