主题
shikiphp打包了完整的 Shiki 主题集:来自 tm-themes 1.12.2的全部 65 个 VS Code主题,也就是 3.23.0所提供的集合 Shiki。其中 44 个为深色主题,21 个为浅色主题。常用 ID 包括 github-dark、github-light、nord、dracula、vitesse-dark、vitesse-light、one-dark-pro、monokai、solarized-dark,以及 catppuccin-*和 material-theme-*系列。
使用 theme 选项指定单个主题,或使用 themes 指定两个或更多主题,以生成包含明暗 CSS 变量的输出。参见 入门。
PHP
use Shikiphp\Shikiphp;
echo Shikiphp::codeToHtml('const answer = 42', [
'lang' => 'js',
'themes' => ['light' => 'github-light', 'dark' => 'github-dark'],
]);
主题 ID 若不在此捆绑包中,会抛出 Shikiphp\Exceptions\Highlight,并显示消息 Unknown theme "…"。
主题控制的内容
主题会设置代码块的前景色和背景色(写入 <pre>),并根据作用域选择器的优先级解析每个令牌的颜色和字体样式(斜体、粗体、下划线、删除线)。对于 lang: 'ansi',其 terminal.ansi* 颜色会成为 ANSI 调色板(参见 ANSI)。若要调整个别颜色而不编辑主题,请使用 colorReplacements。
列出捆绑的主题
通过 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
也可以在命令行中列出,每行一个 ID,并按字母顺序排列:
命令行
vendor/bin/shikiphp themes
目录
类型是捆绑包为每个主题记录的 light 或 dark 类型,选择 themes 选项的主题组合时很有用。
| 主题 | ID | 类型 |
|---|---|---|
| Andromeeda | andromeeda |
深色 |
| Aurora X | aurora-x |
深色 |
| Ayu Dark | ayu-dark |
深色 |
| Ayu Light | ayu-light |
浅色 |
| Ayu Mirage | ayu-mirage |
深色 |
| Catppuccin Frappé | catppuccin-frappe |
深色 |
| Catppuccin Latte | catppuccin-latte |
浅色 |
| Catppuccin Macchiato | catppuccin-macchiato |
深色 |
| Catppuccin Mocha | catppuccin-mocha |
深色 |
| Dark Plus | dark-plus |
深色 |
| Dracula Theme | dracula |
深色 |
| Dracula Theme Soft | dracula-soft |
深色 |
| Everforest Dark | everforest-dark |
深色 |
| Everforest Light | everforest-light |
浅色 |
| GitHub Dark | github-dark |
深色 |
| GitHub Dark Default | github-dark-default |
深色 |
| GitHub Dark Dimmed | github-dark-dimmed |
深色 |
| GitHub Dark High Contrast | github-dark-high-contrast |
深色 |
| GitHub Light | github-light |
浅色 |
| GitHub Light Default | github-light-default |
浅色 |
| GitHub Light High Contrast | github-light-high-contrast |
浅色 |
| Gruvbox Dark Hard | gruvbox-dark-hard |
深色 |
| Gruvbox Dark Medium | gruvbox-dark-medium |
深色 |
| Gruvbox Dark Soft | gruvbox-dark-soft |
深色 |
| Gruvbox Light Hard | gruvbox-light-hard |
浅色 |
| Gruvbox Light Medium | gruvbox-light-medium |
浅色 |
| Gruvbox Light Soft | gruvbox-light-soft |
浅色 |
| Horizon | horizon |
深色 |
| Horizon Bright | horizon-bright |
浅色 |
| Houston | houston |
深色 |
| Kanagawa Dragon | kanagawa-dragon |
深色 |
| Kanagawa Lotus | kanagawa-lotus |
浅色 |
| Kanagawa Wave | kanagawa-wave |
深色 |
| LaserWave | laserwave |
深色 |
| Light Plus | light-plus |
浅色 |
| Material Theme | material-theme |
深色 |
| Material Theme Darker | material-theme-darker |
深色 |
| Material Theme Lighter | material-theme-lighter |
浅色 |
| Material Theme Ocean | material-theme-ocean |
深色 |
| Material Theme Palenight | material-theme-palenight |
深色 |
| Min Dark | min-dark |
深色 |
| Min Light | min-light |
浅色 |
| Monokai | monokai |
深色 |
| Night Owl | night-owl |
深色 |
| Night Owl Light | night-owl-light |
浅色 |
| Nord | nord |
深色 |
| One Dark Pro | one-dark-pro |
深色 |
| One Light | one-light |
浅色 |
| Plastic | plastic |
深色 |
| Poimandres | poimandres |
深色 |
| Red | red |
深色 |
| Rosé Pine | rose-pine |
深色 |
| Rosé Pine Dawn | rose-pine-dawn |
浅色 |
| Rosé Pine Moon | rose-pine-moon |
深色 |
| Slack Dark | slack-dark |
深色 |
| Slack Ochin | slack-ochin |
浅色 |
| Snazzy Light | snazzy-light |
浅色 |
| Solarized Dark | solarized-dark |
深色 |
| Solarized Light | solarized-light |
浅色 |
| Synthwave '84 | synthwave-84 |
深色 |
| Tokyo Night | tokyo-night |
深色 |
| Vesper | vesper |
深色 |
| Vitesse Black | vitesse-black |
深色 |
| Vitesse Dark | vitesse-dark |
深色 |
| Vitesse Light | vitesse-light |
浅色 |
添加自己的语言
使用 VS Code 和 loadTheme 注册自定义 JSON 主题。参见 自定义语言和主题。