Aller au contenu

Thèmes

shikiphp intègre l'ensemble complet des thèmes Shiki : les 65 thèmes VS Code de tm-themes 1.12.2, l'ensemble fourni par Shiki 3.23.0. 44 sont sombres et 21 sont clairs. Parmi les identifiants les plus populaires figurent github-dark, github-light, nord, dracula, vitesse-dark, vitesse-light, one-dark-pro, monokai, solarized-dark, ainsi que les familles catppuccin-* et material-theme-*.

Utilisez un seul thème avec l’option theme, ou deux (ou plus) avec themes pour une sortie à variables CSS clair/sombre. Consultez Premiers pas.

PHP
use Shikiphp\Shikiphp;

echo Shikiphp::codeToHtml('const answer = 42', [
    'lang'   => 'js',
    'themes' => ['light' => 'github-light', 'dark' => 'github-dark'],
]);

Un identifiant de thème inconnu du bundle déclenche Shikiphp\Exceptions\Highlight avec le message Unknown theme "…".

Ce que contrôle un thème

Un thème définit le premier plan et l’arrière-plan du bloc (écrits sur le <pre>), ainsi que la couleur et le style de police (italique, gras, souligné, barré) de chaque jeton, déterminés par la spécificité des sélecteurs de portée. Pour lang: 'ansi', ses couleurs terminal.ansi* deviennent la palette ANSI (voir ANSI). Pour ajuster des couleurs individuelles sans modifier un thème, utilisez colorReplacements.

Liste des thèmes inclus

Depuis PHP :

PHP
use Shikiphp\Shikiphp;

$highlighter = Shikiphp::highlighter();

$highlighter->bundledThemes(); // list<string> — ids shipped in the box
$highlighter->loadedThemes();  // list<string> — bundled plus any you registered

Ou depuis la ligne de commande, avec un identifiant par ligne, par ordre alphabétique :

Shell
vendor/bin/shikiphp themes

Catalogue

Le type correspond au type light ou dark que le bundle associe à chaque thème. Il est utile pour choisir une paire pour l’option themes.

Thème Identifiant Type
Andromeeda andromeeda sombre
Aurora X aurora-x sombre
Ayu Dark ayu-dark sombre
Ayu Light ayu-light clair
Ayu Mirage ayu-mirage sombre
Catppuccin Frappé catppuccin-frappe sombre
Catppuccin Latte catppuccin-latte clair
Catppuccin Macchiato catppuccin-macchiato sombre
Catppuccin Mocha catppuccin-mocha sombre
Dark Plus dark-plus sombre
Dracula Theme dracula sombre
Dracula Theme Soft dracula-soft sombre
Everforest Dark everforest-dark sombre
Everforest Light everforest-light clair
GitHub Dark github-dark sombre
GitHub Dark Default github-dark-default sombre
GitHub Dark Dimmed github-dark-dimmed sombre
GitHub Dark High Contrast github-dark-high-contrast sombre
GitHub Light github-light clair
GitHub Light Default github-light-default clair
GitHub Light High Contrast github-light-high-contrast clair
Gruvbox Dark Hard gruvbox-dark-hard sombre
Gruvbox Dark Medium gruvbox-dark-medium sombre
Gruvbox Dark Soft gruvbox-dark-soft sombre
Gruvbox Light Hard gruvbox-light-hard clair
Gruvbox Light Medium gruvbox-light-medium clair
Gruvbox Light Soft gruvbox-light-soft clair
Horizon horizon sombre
Horizon Bright horizon-bright clair
Houston houston sombre
Kanagawa Dragon kanagawa-dragon sombre
Kanagawa Lotus kanagawa-lotus clair
Kanagawa Wave kanagawa-wave sombre
LaserWave laserwave sombre
Light Plus light-plus clair
Material Theme material-theme sombre
Material Theme Darker material-theme-darker sombre
Material Theme Lighter material-theme-lighter clair
Material Theme Ocean material-theme-ocean sombre
Material Theme Palenight material-theme-palenight sombre
Min Dark min-dark sombre
Min Light min-light clair
Monokai monokai sombre
Night Owl night-owl sombre
Night Owl Light night-owl-light clair
Nord nord sombre
One Dark Pro one-dark-pro sombre
One Light one-light clair
Plastic plastic sombre
Poimandres poimandres sombre
Red red sombre
Rosé Pine rose-pine sombre
Rosé Pine Dawn rose-pine-dawn clair
Rosé Pine Moon rose-pine-moon sombre
Slack Dark slack-dark sombre
Slack Ochin slack-ochin clair
Snazzy Light snazzy-light clair
Solarized Dark solarized-dark sombre
Solarized Light solarized-light clair
Synthwave '84 synthwave-84 sombre
Tokyo Night tokyo-night sombre
Vesper vesper sombre
Vitesse Black vitesse-black sombre
Vitesse Dark vitesse-dark sombre
Vitesse Light vitesse-light clair

Ajouter les vôtres

Enregistrez un thème VS Code personnalisé JSON avec loadTheme. Consultez Custom languages and themes.