1

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?

Nested Software
  • 303
  • 4
  • 15

1 Answers1

5

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.

nbering
  • 2,725
  • 1
  • 23
  • 31
  • Do you know if there's a way to specify this as a customization/extension on top of the original theme definition, as described [here](https://docs.github.com/en/github/working-with-github-pages/adding-a-theme-to-your-github-pages-site-using-jekyll#customizing-your-themes-css)? I'd like to be able to do something like this that can be applied as a delta/extension to any of the GH Pages themes, instead of having to copy the whole theme definition into my own site and edit it there. – Andrew Janke Mar 15 '21 at 01:45