Add style to standalone <code> tag - how?

[vendelin]

In short:

Is there a way to generate <code> from single backticks with a class? Doesn’t matter, if the name of the class is configurable or not.

The long version:

When using single bacticks in markdown to make the text appear as code, the generated <code> tag contains no specific class. This presents a problem with styling, as chroma CSS classes do not specify background-color for <code>.

If, for example, I want to use dark-colored theme for a <div class="highlight"> generated from triple-backtic in markdown, but want to have a light non-white background for the inline code (single backticks), it won’t work, as default background-color for <code> will propagate into the <code class="whatever"> nested in <div class="highlight"> .

Example:

`/usr/local/bin` seems to be the most appropriate candidate:

```
sudo cp ~/Downloads/hugo /usr/local/bin/
```

I get the following HTML generated:

<p><code>/usr/local/bin</code> seems to be the most appropriate candidate:</p>
<div class="highlight"><pre class="chroma"><code class="language-fallback" data-lang="fallback">sudo cp ~/Downloads/hugo /usr/local/bin/
</code></pre></div>

As an aside, both class and data-lang attributes in generated code seem to be completely redundant. Is there a way not to generate them?

[ju52]

you can define the code style in your CSS file

[vendelin]

… and it will propagate into every other <code>. This is exactly what I’d like to avoid.

[jmooring]

If your inline code statements (backticks) appear within paragraphs (true in most cases), you might add some specificity to your selector:

p > code {
  background: #eee;
  color: #000;
  padding: 0.1rem 0.2rem;
}

[vendelin]

Thanks, @jmooring , I’ve completely overlooked this workaround!