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

Question

I am trying to customize the Minima theme for Jekyll. I'd like to have a dark background for code between triple backticks (i.e. in its own paragraph), but I don't want to affect the background of inline code between single backticks. Is there a way to do this?

Answer 1

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

<code>Lorem ipsum</code>

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

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

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

• <code>标签本身没有<pre><code>模式特定，围栏代码样式的背景颜色覆盖内联块的背景颜色
• <code>模式也匹配模式，作为一个子集，因此应用于CSS 规则的字体粗体规则也适用<pre><code>于<code><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>标记的块。