跳转到正文

主题

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 主题。参见 自定义语言和主题。