Перейти к содержимому

Темы

shikiphp включает полный набор тем Shiki: все 65 тем VS Code из tm-themes 1.12.2, набора тем, который поставляет Shiki 3.23.0. 44 темы тёмные, 21 — светлая. Среди популярных идентификаторов: 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'],
]);

Если пакет не знает идентификатор темы, он выдаёт 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

Или из командной строки: по одному идентификатору в строке, в алфавитном порядке:

Командная оболочка
vendor/bin/shikiphp themes

Каталог

Тип — это light или dark тип, который пакет указывает для каждой темы. Он пригодится при выборе пары для параметра themes.

Тема Идентификатор Тип
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 JSON с помощью loadTheme. См. раздел Пользовательские языки и темы.