inline code 和 code block 的 CSS 會互相干擾
問題
Jekyll 的 Markdown 反引號 code 會產生 <code class="language-plaintext highlighter-rouge">。code block 的外層是 <div class="highlighter-rouge">。兩者共用 .highlighter-rouge class。
如果 CSS 用 .highlighter-rouge { background: dark } 設定 code block 的深色底,inline code 也會變成深色底,因為它也有 .highlighter-rouge class。
原因
Claude 沒注意到 inline code 和 code block 共用 class name。
解決方案
CSS selector 要用 div.highlighter-rouge 限定 code block,inline code 用 code.highlighter-rouge 單獨設定。如果 CSS 怎麼改都不生效,直接從 Markdown 源頭改(用粗體代替反引號)。
可複用的 CLAUDE.md 規則
### Jekyll CSS
- code block 用 div.highlighter-rouge 限定,不要用 .highlighter-rouge
- inline code 的 class 是 code.language-plaintext.highlighter-rouge
- 兩者共用 class,CSS 必須分開處理
- CSS 改不動就從 Markdown 源頭改(粗體代替反引號)