CODEWITHSUNDEEP
markdown
Kai
Kai

Reputation: 81

How to change inline code color in mkdocs?

I am using mkdocs to create a static documentation, and I am using the rtd-dropdown theme. Does anyone know how to change the color of inline code using css for mkdocs?

Upvotes: 2

Views: 1700

Answers (1)

Tim Skov Jacobsen
Tim Skov Jacobsen

Reputation: 3852

When your site has rendered in your browser you can:

  1. Right-click on an inline code element on the page
  2. Choose "Inspect Element" (Firefox) or "Inspect" (Chrome)
    This will open the inspect tool where you can view the CSS that has been applied to each element on the site. Make sure the inspector sits on a <code></code> line.
  3. Find the entry that says color
  4. Find the CSS selector that has rendered the color

In my case, the CSS selector is .md-typeset code.

This means that if I want my inline code text color to be red, I can put the following in my .css file:

.md-typeset p > code {
  color: red;
}

Note that p > code means "all code inside p-tags", which selects inline code. Neglecting the p > might result in code blocks being affected by the css as well. This is likely not what is desired.

You can of course use this to change other attributes like background-color, font-family, etc. as well.

I'm running MkDocs v1.1.2 with the Material theme.

Upvotes: 1

Related Questions