Background color of markdown pre formated text

Support Themes & Styling
10

@thgr, I’ve has a look at your website.

When looking at the css tree in the inspector of the browser, the issue is quite clear: It’s a specificity issue. The most specific rule wins.

The problem is caused by this rule in theme.min.css.

pre code:not(.hljs):not([class*=language-]) {
    background: #f8f8f8;
}

This rule is more specific than pre code and hence it wins.

Two possible solutions:

  • Make you generated code more specific. In you markdown use
    ```html
mon texte
mon texte
```
    Which will be translated into :
    <pre><code class="language-html">
  mon texte
  mon texte
</code></pre>
    Now the rule form theme.min.css will no longer match the block quote.
  • Or you could change custom.css to match the specificity from theme.min.css
    pre code:not(.hljs):not([class*=language-]) {
  background: red;
}
    Now the last rule (the one from custom.css) will win.