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

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

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?

Solution

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.