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

An inline code block in Markdown renders as:

<code>Lorem ipsum</code>

A fenced code block - the triple backticks - renders as:

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

Following is an example of CSS selectors targeting theses patterns. You can see these behaviours in my example:

• <code> tag on it's own is less specific than the <pre><code> pattern, the background-colour of the fenced code style overrides the background colour of the inline block
• the <code> pattern also matches the <pre><code> pattern, as a subset, so the font-weight bold rule applied to <code> CSS rule, also applies to <pre><code>
• since the color: Blue; attribute only applies to <pre><code>, it's the only one with blue text

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

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

<code>Lorem ipsum</code>

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

In summary, if you want to apply a rule to the fenced code block but not the inline code block, use a more specific CSS selector, like pre > code. This selector matches <code> blocks where the parent is a <pre> tag.