From f9f9cf8e11eb16689c3a7a31660fb04c8596059a Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Tue, 25 Nov 2025 11:31:30 +0800 Subject: [PATCH] docs: use a simpler command in custom syntax highlighter change command because tailwind v4 natively support css nesting --- .../docs/advanced-customisation/index.it.md | 35 +++---------------- .../docs/advanced-customisation/index.ja.md | 35 +++---------------- .../docs/advanced-customisation/index.md | 35 +++---------------- .../advanced-customisation/index.zh-cn.md | 35 +++---------------- 4 files changed, 20 insertions(+), 120 deletions(-) diff --git a/exampleSite/content/docs/advanced-customisation/index.it.md b/exampleSite/content/docs/advanced-customisation/index.it.md index dcdbb419..35e5bc30 100644 --- a/exampleSite/content/docs/advanced-customisation/index.it.md +++ b/exampleSite/content/docs/advanced-customisation/index.it.md @@ -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). diff --git a/exampleSite/content/docs/advanced-customisation/index.ja.md b/exampleSite/content/docs/advanced-customisation/index.ja.md index 31618f4d..59fc0e61 100644 --- a/exampleSite/content/docs/advanced-customisation/index.ja.md +++ b/exampleSite/content/docs/advanced-customisation/index.ja.md @@ -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)で確認できます。 diff --git a/exampleSite/content/docs/advanced-customisation/index.md b/exampleSite/content/docs/advanced-customisation/index.md index dcdbb419..35e5bc30 100644 --- a/exampleSite/content/docs/advanced-customisation/index.md +++ b/exampleSite/content/docs/advanced-customisation/index.md @@ -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). diff --git a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md index 666cce57..94ba2ce5 100644 --- a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md +++ b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md @@ -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)中查看所有可用的样式。