docs: use a simpler command in custom syntax highlighter

change command because tailwind v4 natively support css nesting
This commit is contained in:
ZhenShuo Leo
2025-11-25 11:31:30 +08:00
parent 0f105d2acb
commit f9f9cf8e11
4 changed files with 20 additions and 120 deletions
@@ -136,7 +136,7 @@ Blowfish はカスタム構文ハイライトスタイルを使用しており
.chroma:is(.dark *) * {
color: unset;
font-weight: unset;
background-color: unset;
font-style: unset;
}
```
@@ -144,38 +144,13 @@ Blowfish はカスタム構文ハイライトスタイルを使用しており
```sh
# Mac/Linux
hugo gen chromastyles --style=emacs | sed 's/\./html:not(.dark) ./' >> assets/css/custom.css
hugo gen chromastyles --style=evergarden | sed 's/\./html.dark ./' >> assets/css/custom.css
(echo 'html:not(.dark) {'; hugo gen chromastyles --style=emacs; echo '}') >> assets/css/custom.css
(echo 'html.dark {'; hugo gen chromastyles --style=evergarden; echo '}') >> assets/css/custom.css
# Windows PowerShell
# このコマンドは CMD では実行できず PowerShell で実行する必要がある
hugo gen chromastyles --style=emacs | ForEach-Object { $_ -replace '\.', 'html:not(.dark) .' } | Add-Content -Path "css/custom.txt"
hugo gen chromastyles --style=evergarden | ForEach-Object { $_ -replace '\.', 'html.dark .' } | Add-Content -Path "css/custom.txt"
```
最終的な `custom.css` ファイルは以下のようになります:
```css
.chroma,
.chroma *,
.chroma:is(.dark *),
.chroma:is(.dark *) * {
color: unset;
font-weight: unset;
background-color: unset;
}
/* Generated using: hugo gen chromastyles --style=emacs */
/* Background */ html:not(.dark) .bg { background-color:#f8f8f8; }
/* PreWrapper */ html:not(.dark) .chroma { background-color:#f8f8f8; }
/* ... */
/* Generated using: hugo gen chromastyles --style=evergarden */
/* Background */ html.dark .bg { color:#d6cbb4;background-color:#252b2e; }
/* PreWrapper */ html.dark .chroma { color:#d6cbb4;background-color:#252b2e; }
/* ... */
@("html:not(.dark) {"; (hugo gen chromastyles --style=emacs); "}") | Add-Content -Path "assets/css/custom.css"
@("html.dark {"; (hugo gen chromastyles --style=evergarden); "}") | Add-Content -Path "assets/css/custom.css"
```
すべての利用可能なスタイルは、[Hugo のドキュメント](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles)で確認できます。