본문으로 건너뛰기

테마

shikiphp에는 Shiki 전체 테마 세트가 포함됩니다. tm-themes 1.12.2의 VS Code 테마 65개 모두, 즉 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 라이트

직접 추가하기

loadTheme로 사용자 지정 VS Code 테마 JSON을 등록하세요. 사용자 지정 언어 및 테마를 참조하세요.