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

View File

@@ -135,7 +135,7 @@ Blowfish uses a custom syntax highlighting style, with colors defined in `assets
.chroma:is(.dark *) * {
color: unset;
font-weight: unset;
background-color: unset;
font-style: unset;
}
```
@@ -143,38 +143,13 @@ This clears the default Chroma styles. The next step is to incorporate Chroma st
```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
# This command cannot run in CMD; it must run in 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"
```
The final `custom.css` file should resemble the following:
```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"
```
See all available styles in [Hugo's documentation](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles).

View File

@@ -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)で確認できます。

View File

@@ -135,7 +135,7 @@ Blowfish uses a custom syntax highlighting style, with colors defined in `assets
.chroma:is(.dark *) * {
color: unset;
font-weight: unset;
background-color: unset;
font-style: unset;
}
```
@@ -143,38 +143,13 @@ This clears the default Chroma styles. The next step is to incorporate Chroma st
```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
# This command cannot run in CMD; it must run in 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"
```
The final `custom.css` file should resemble the following:
```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"
```
See all available styles in [Hugo's documentation](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles).

View File

@@ -134,7 +134,7 @@ Blowfish 使用自定义的语法高亮样式,颜色定义在 `assets/css/sche
.chroma:is(.dark *) * {
color: unset;
font-weight: unset;
background-color: unset;
font-style: unset;
}
```
@@ -142,38 +142,13 @@ Blowfish 使用自定义的语法高亮样式,颜色定义在 `assets/css/sche
```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)中查看所有可用的样式。