테마
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 변수 출력을 만들 수 있습니다. 시작하기를 참조하세요.
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에서:
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을 등록하세요. 사용자 지정 언어 및 테마를 참조하세요.