使用 Jekyll 的 Minima 主题，在单个反引号与三重反引号中单独降价的样式

Question

我正在尝试为 Jekyll 定制 Minima 主题。我想在三个反引号之间（即在其自己的段落中）为代码设置深色背景，但我不想影响单个反引号之间内联代码的背景。有办法吗？

Answer 1

Markdown 中的内联代码块呈现为：

<code>Lorem ipsum</code>

围栏代码块 - 三重反引号 - 呈现为：

<pre><code>Lorem ipsum</code></pre>

以下是针对这些模式的 CSS 选择器示例。您可以在我的示例中看到这些行为：

<code> 标签本身不如 <pre><code> 模式具体，围栏代码样式的 background-colour 会覆盖内联块的背景色
<code> 模式也匹配 <pre><code> 模式，作为一个子集，所以 font-weight 粗体规则应用于 <code> CSS 规则，也适用于 <pre><code>
因为 color: Blue; 属性只适用于 <pre><code>，它是唯一一个带有蓝色文本的

code {
    font-weight: bold;
    background-color: GreenYellow;
}

pre > code {
  background-color: AliceBlue;
  color: Blue;
}

<code>Lorem ipsum</code>

<pre><code>Lorem ipsum</code></pre>

总而言之，如果要将规则应用于围栏代码块而不是内联代码块，请使用更具体的 CSS 选择器，例如 pre > code。该选择器匹配 <code> 块，父块是 <pre> 标签。

Separate style for markdown in single backticks vs. triple backticks using the Minima theme for Jekyll