From 32f452b25d5e5343d2a46df740dd9c7b36209db9 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 18 Oct 2025 20:06:24 +0800 Subject: [PATCH 1/2] feat(chroma): use cascade layer to allow override via custom.css This allows users to customize Chroma CSS without building the TailwindCSS manually. For example, add this to `custom.css`: ``` .chroma, .chroma, .chroma:is(.dark *), .chroma:is(.dark *) * { color: unset; background-color: unset; font-weight: unset; } ``` Then use: ``` hugo gen chromastyles --style=github | sed 's/\./html.dark ./' >> assets/css/custom.css hugo gen chromastyles --style=github | sed 's/\./html:not(.dark) ./' >> exampleSite/assets/css/custom.css ``` --- assets/css/compiled/main.css | 484 ++++++++++++++++++----------------- assets/css/main.css | 8 +- 2 files changed, 247 insertions(+), 245 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 5aa184df..88f72603 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1,242 +1,6 @@ /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */ /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */ @layer properties; -#zen-mode-button { - cursor: pointer; -} -.zen-mode { - position: relative; -} -body.zen-mode-enable { - #bmc-wbtn, .author { - display: none !important; - } -} -.prose .chroma { - position: static; - border-radius: var(--radius-md); - background-color: rgba(var(--color-neutral-50), 1); - color: rgba(var(--color-neutral-700), 1); - &:is(.dark *) { - background-color: rgba(var(--color-neutral-700), 1); - } - &:is(.dark *) { - color: rgba(var(--color-neutral-200), 1); - } -} -.chroma .lntd, .chroma .lntd pre { - margin: calc(var(--spacing) * 0); - --tw-border-style: none; - border-style: none; - padding: calc(var(--spacing) * 0); - vertical-align: top; -} -.chroma .lntable { - display: block; - width: auto; - overflow: hidden; - padding-inline: calc(var(--spacing) * 4); - padding-block: calc(var(--spacing) * 3); - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - border-spacing: 0; -} -.chroma .hl { - margin-inline: calc(var(--spacing) * -4); - display: block; - width: auto; - background-color: rgba(var(--color-primary-100), 1); - padding-inline: calc(var(--spacing) * 4); - &:is(.dark *) { - background-color: rgba(var(--color-primary-900), 1); - } -} -.chroma .lntd .hl { - margin: calc(var(--spacing) * 0); - padding: calc(var(--spacing) * 0); -} -.chroma .lnt, .chroma .ln { - margin-right: 0.4em; - padding-inline: 0.4em; - padding-block: calc(var(--spacing) * 0); - color: rgba(var(--color-neutral-600), 1); - &:is(.dark *) { - color: rgba(var(--color-neutral-300), 1); - } -} -.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o { - color: rgba(var(--color-primary-600), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-300), 1); - } -} -.chroma .kc { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); - } -} -.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-600), 1); - } -} -.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl { - color: rgba(var(--color-secondary-900), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-200), 1); - } -} -.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt { - color: rgba(var(--color-secondary-800), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-300), 1); - } -} -.chroma .no, .chroma .ne, .chroma .vg { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); - } -} -.chroma .nf { - color: rgba(var(--color-secondary-600), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); - } -} -.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp { - color: rgba(var(--color-primary-800), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-400), 1); - } -} -.chroma .se { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-secondary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-secondary-500), 1); - } -} -.chroma .sr, .chroma .ss { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-primary-800), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-400), 1); - } -} -.chroma .ow { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-primary-400), 1); - &:is(.dark *) { - color: rgba(var(--color-primary-600), 1); - } -} -.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { - color: rgba(var(--color-neutral-500), 1); - font-style: italic; - &:is(.dark *) { - color: rgba(var(--color-neutral-400), 1); - } -} -.chroma .ch { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-neutral-500), 1); - font-style: italic; - &:is(.dark *) { - color: rgba(var(--color-neutral-400), 1); - } -} -.chroma .ge { - font-style: italic; -} -.chroma .gh { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - color: rgba(var(--color-neutral-500), 1); -} -.chroma .gs { - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); -} -.chroma .gu, .chroma .gt { - color: rgba(var(--color-neutral-500), 1); -} -.chroma .gl { - text-decoration-line: underline; -} -.a11y-panel-enter-active { - animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; -} -.a11y-panel-leave-active { - animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; -} -.ios-toggle { - position: relative; - width: 42px; - height: 24px; - background: #e5e5e5; - border-radius: 12px; - cursor: pointer; - transition: background-color 0.3s ease; - pointer-events: auto; -} -.ios-toggle input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - cursor: pointer; - z-index: 1; -} -.ios-toggle::after { - content: ""; - position: absolute; - top: 2px; - left: 2px; - width: 20px; - height: 20px; - background: white; - border-radius: 50%; - transition: transform 0.3s ease, background-color 0.3s ease; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); - z-index: 0; -} -.ios-toggle input:checked + .toggle-track::after { - transform: translateX(18px); -} -.ios-toggle input:checked + .toggle-track { - background: rgba(var(--color-primary-500), 1); -} -.ios-toggle input:checked ~ .ios-toggle-ball { - transform: translateX(18px); -} -.ios-toggle.is-checked { - background: rgba(var(--color-primary-500), 1); -} -.ios-toggle:has(input:checked) { - background: rgba(var(--color-primary-500), 1); -} -.ios-toggle:has(input:checked)::after { - transform: translateX(18px); -} -.dark .ios-toggle { - background: #404040; -} -.dark .ios-toggle::after { - background: #f5f5f5; -} @layer theme, base, components, utilities; @layer theme { :root, :host { @@ -3516,6 +3280,244 @@ body.zen-mode-enable { } } } +@layer utilities { + .prose .chroma { + position: static; + border-radius: var(--radius-md); + background-color: rgba(var(--color-neutral-50), 1); + color: rgba(var(--color-neutral-700), 1); + &:is(.dark *) { + background-color: rgba(var(--color-neutral-700), 1); + } + &:is(.dark *) { + color: rgba(var(--color-neutral-200), 1); + } + } + .chroma .lntd, .chroma .lntd pre { + margin: calc(var(--spacing) * 0); + --tw-border-style: none; + border-style: none; + padding: calc(var(--spacing) * 0); + vertical-align: top; + } + .chroma .lntable { + display: block; + width: auto; + overflow: hidden; + padding-inline: calc(var(--spacing) * 4); + padding-block: calc(var(--spacing) * 3); + font-size: var(--text-base); + line-height: var(--tw-leading, var(--text-base--line-height)); + border-spacing: 0; + } + .chroma .hl { + margin-inline: calc(var(--spacing) * -4); + display: block; + width: auto; + background-color: rgba(var(--color-primary-100), 1); + padding-inline: calc(var(--spacing) * 4); + &:is(.dark *) { + background-color: rgba(var(--color-primary-900), 1); + } + } + .chroma .lntd .hl { + margin: calc(var(--spacing) * 0); + padding: calc(var(--spacing) * 0); + } + .chroma .lnt, .chroma .ln { + margin-right: 0.4em; + padding-inline: 0.4em; + padding-block: calc(var(--spacing) * 0); + color: rgba(var(--color-neutral-600), 1); + &:is(.dark *) { + color: rgba(var(--color-neutral-300), 1); + } + } + .chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o { + color: rgba(var(--color-primary-600), 1); + &:is(.dark *) { + color: rgba(var(--color-primary-300), 1); + } + } + .chroma .kc { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: rgba(var(--color-secondary-400), 1); + &:is(.dark *) { + color: rgba(var(--color-secondary-500), 1); + } + } + .chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo { + color: rgba(var(--color-secondary-400), 1); + &:is(.dark *) { + color: rgba(var(--color-secondary-600), 1); + } + } + .chroma .n, .chroma .nd, .chroma .ni, .chroma .nl { + color: rgba(var(--color-secondary-900), 1); + &:is(.dark *) { + color: rgba(var(--color-secondary-200), 1); + } + } + .chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt { + color: rgba(var(--color-secondary-800), 1); + &:is(.dark *) { + color: rgba(var(--color-secondary-300), 1); + } + } + .chroma .no, .chroma .ne, .chroma .vg { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: rgba(var(--color-secondary-400), 1); + &:is(.dark *) { + color: rgba(var(--color-secondary-500), 1); + } + } + .chroma .nf { + color: rgba(var(--color-secondary-600), 1); + &:is(.dark *) { + color: rgba(var(--color-secondary-500), 1); + } + } + .chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp { + color: rgba(var(--color-primary-800), 1); + &:is(.dark *) { + color: rgba(var(--color-primary-400), 1); + } + } + .chroma .se { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: rgba(var(--color-secondary-400), 1); + &:is(.dark *) { + color: rgba(var(--color-secondary-500), 1); + } + } + .chroma .sr, .chroma .ss { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: rgba(var(--color-primary-800), 1); + &:is(.dark *) { + color: rgba(var(--color-primary-400), 1); + } + } + .chroma .ow { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: rgba(var(--color-primary-400), 1); + &:is(.dark *) { + color: rgba(var(--color-primary-600), 1); + } + } + .chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { + color: rgba(var(--color-neutral-500), 1); + font-style: italic; + &:is(.dark *) { + color: rgba(var(--color-neutral-400), 1); + } + } + .chroma .ch { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: rgba(var(--color-neutral-500), 1); + font-style: italic; + &:is(.dark *) { + color: rgba(var(--color-neutral-400), 1); + } + } + .chroma .ge { + font-style: italic; + } + .chroma .gh { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + color: rgba(var(--color-neutral-500), 1); + } + .chroma .gs { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .chroma .gu, .chroma .gt { + color: rgba(var(--color-neutral-500), 1); + } + .chroma .gl { + text-decoration-line: underline; + } +} +#zen-mode-button { + cursor: pointer; +} +.zen-mode { + position: relative; +} +body.zen-mode-enable { + #bmc-wbtn, .author { + display: none !important; + } +} +.a11y-panel-enter-active { + animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; +} +.a11y-panel-leave-active { + animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; +} +.ios-toggle { + position: relative; + width: 42px; + height: 24px; + background: #e5e5e5; + border-radius: 12px; + cursor: pointer; + transition: background-color 0.3s ease; + pointer-events: auto; +} +.ios-toggle input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + z-index: 1; +} +.ios-toggle::after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + background: white; + border-radius: 50%; + transition: transform 0.3s ease, background-color 0.3s ease; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + z-index: 0; +} +.ios-toggle input:checked + .toggle-track::after { + transform: translateX(18px); +} +.ios-toggle input:checked + .toggle-track { + background: rgba(var(--color-primary-500), 1); +} +.ios-toggle input:checked ~ .ios-toggle-ball { + transform: translateX(18px); +} +.ios-toggle.is-checked { + background: rgba(var(--color-primary-500), 1); +} +.ios-toggle:has(input:checked) { + background: rgba(var(--color-primary-500), 1); +} +.ios-toggle:has(input:checked)::after { + transform: translateX(18px); +} +.dark .ios-toggle { + background: #404040; +} +.dark .ios-toggle::after { + background: #f5f5f5; +} body a, body button { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -3921,10 +3923,6 @@ pre { } } } -@property --tw-font-weight { - syntax: "*"; - inherits: false; -} @property --tw-translate-x { syntax: "*"; inherits: false; @@ -4048,6 +4046,10 @@ pre { syntax: "*"; inherits: false; } +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} @property --tw-tracking { syntax: "*"; inherits: false; @@ -4252,7 +4254,6 @@ pre { @layer properties { @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { *, ::before, ::after, ::backdrop { - --tw-font-weight: initial; --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; @@ -4280,6 +4281,7 @@ pre { --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; + --tw-font-weight: initial; --tw-tracking: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; diff --git a/assets/css/main.css b/assets/css/main.css index 5a495601..c270f924 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,11 +1,11 @@ /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */ -@import "./components/zen-mode.css"; -@import "./components/chroma.css"; -@import "./components/a11y.css"; +@config "../../tailwind.config.js"; @import "tailwindcss"; -@config "../../tailwind.config.js"; +@import "./components/chroma.css" layer(utilities); +@import "./components/zen-mode.css"; +@import "./components/a11y.css"; body a, body button { From 62ce9f2e6836f7c83e3b0d15bbfa8a8092ff6b01 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Sat, 18 Oct 2025 20:46:56 +0800 Subject: [PATCH 2/2] docs: document the Chroma customization steps --- .../docs/advanced-customisation/index.it.md | 55 +++++++++++++++++++ .../docs/advanced-customisation/index.ja.md | 55 +++++++++++++++++++ .../docs/advanced-customisation/index.md | 55 +++++++++++++++++++ .../advanced-customisation/index.zh-cn.md | 55 +++++++++++++++++++ 4 files changed, 220 insertions(+) diff --git a/exampleSite/content/docs/advanced-customisation/index.it.md b/exampleSite/content/docs/advanced-customisation/index.it.md index 57fb7ffe..dcdbb419 100644 --- a/exampleSite/content/docs/advanced-customisation/index.it.md +++ b/exampleSite/content/docs/advanced-customisation/index.it.md @@ -124,6 +124,61 @@ html { Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`. +### Changing Syntax Highlighting Theme + +Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following: + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + background-color: unset; +} +``` + +This clears the default Chroma styles. The next step is to incorporate Chroma styles into your CSS file using the `hugo gen chromastyles` command: + +```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 + +# 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; } +/* ... */ +``` + +See all available styles in [Hugo's documentation](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles). + ## Building the theme CSS from source If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet. diff --git a/exampleSite/content/docs/advanced-customisation/index.ja.md b/exampleSite/content/docs/advanced-customisation/index.ja.md index 5ad92da8..31618f4d 100644 --- a/exampleSite/content/docs/advanced-customisation/index.ja.md +++ b/exampleSite/content/docs/advanced-customisation/index.ja.md @@ -125,6 +125,61 @@ html { この1つの値を変更するだけで、ウェブサイトのすべてのフォントサイズがこの新しいサイズに合わせて調整されます。なので、使用されるフォントサイズ全体を大きくするには、値を `12pt` より大きくすれば良いです。同様に、フォントサイズを小さくするには、値を `12pt` より小さくすれば良いです。 +### シンタックスハイライトテーマの変更 + +Blowfish はカスタム構文ハイライトスタイルを使用しており、色は `assets/css/schemes` に定義されています。構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください： + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + background-color: unset; +} +``` + +これによりデフォルトの Chroma スタイルがクリアされます。次に `hugo gen chromastyles` コマンドで CSS ファイルに Chroma スタイルを組み込みます: + +```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 + +# 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; } +/* ... */ +``` + +すべての利用可能なスタイルは、[Hugo のドキュメント](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles)で確認できます。 + ## ソースからテーマ CSS をビルドする 大幅な変更を加えたい場合は、Tailwind CSS の JIT コンパイラを利用して、テーマ CSS 全体を最初から再構築できます。これは、Tailwind 設定を調整したり、メインスタイルシートに追加の Tailwind クラスを追加したりする場合に便利です。 diff --git a/exampleSite/content/docs/advanced-customisation/index.md b/exampleSite/content/docs/advanced-customisation/index.md index 57fb7ffe..dcdbb419 100644 --- a/exampleSite/content/docs/advanced-customisation/index.md +++ b/exampleSite/content/docs/advanced-customisation/index.md @@ -124,6 +124,61 @@ html { Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than `12pt`. Similarly, to decrease the font sizes, make the value less than `12pt`. +### Changing Syntax Highlighting Theme + +Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following: + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + background-color: unset; +} +``` + +This clears the default Chroma styles. The next step is to incorporate Chroma styles into your CSS file using the `hugo gen chromastyles` command: + +```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 + +# 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; } +/* ... */ +``` + +See all available styles in [Hugo's documentation](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles). + ## Building the theme CSS from source If you'd like to make a major change, you can take advantage of Tailwind CSS's JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet. diff --git a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md index 65b9e312..666cce57 100644 --- a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md +++ b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md @@ -123,6 +123,61 @@ html { 只需更改此值，您网站上的所有字体大小都将调整为此新大小。因此，要增加使用的整体字体大小，请将该值设置为大于 `12pt` 。同样，要减小字体大小，请将值设置为小于 `12pt` 。 +### 更换语法高亮主题 + +Blowfish 使用自定义的语法高亮样式，颜色定义在 `assets/css/schemes` 中。要更换语法高亮主题，请创建 `assets/css/custom.css`，然后添加以下内容： + +```css +.chroma, +.chroma *, +.chroma:is(.dark *), +.chroma:is(.dark *) * { + color: unset; + font-weight: unset; + background-color: unset; +} +``` + +这会清除预设的 Chroma 样式，下一步我们使用 `hugo gen chromastyles` 指令将 Chroma 样式加入到您的 css 档案中： + +```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 + +# 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; } +/* ... */ +``` + +在 [Hugo 文档](https://gohugo.io/quick-reference/syntax-highlighting-styles/#styles)中查看所有可用的样式。 + ## 从源代码构建主题 CSS 如果您想进行大量更改，您可以利用 Tailwind CSS 的 JIT 编译器并从头开始重建整个主题 CSS。尤其是您想要调整 Tailwind 配置或向主样式表添加额外的 Tailwind 类的时候，这种方法将非常有用。