2

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?

Kai
  • 81
  • 1
  • 6
  • Please include what you have tried and why that didn't work. – Waylan Jul 18 '19 at 20:20
  • I have used: code { color: #C70039; white-space: pre-wrap; word-wrap: break-word; padding: 2px 5px; } – Kai Jul 19 '19 at 16:31
  • I suspect the issue is related to CSS order of precedence. If you use your browser's "inspect" tool, you should find that a rule defined in the theme is overriding your custom rule. See [What is the order of precedence for CSS?](https://stackoverflow.com/q/25105736/866026) for details. – Waylan Jul 19 '19 at 17:10

1 Answers1

1

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.

Tim Skov Jacobsen
  • 3,583
  • 4
  • 26
  • 23