如何在mkdocs中更改内联代码颜色？

Question

我使用mkdocs创建静态文档，并使用rtd-dropdown主题。有人知道如何使用css for mkdocs改变内联代码的颜色吗？

Answer 1

当您的网站在浏览器中呈现后，您可以：

1. 右键单击页面上的内联代码元素
2. 选择“检查元素”（Firefox）或“检查”（Chrome）这将打开检查工具，您可以在其中查看已应用于站点上每个元素的 CSS。 确保检查器位于<code></code> 行。
3. 找到说颜色的条目
4. 找到已渲染颜色的color 选择器

在我的例子中，CSS选择器是.md-typeset code。

这意味着，如果我希望我的内联代码文本颜色为red，我可以在我的.css文件中放入以下内容：

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

请注意，p > code的意思是“p标记内的所有代码”，它选择内联代码。忽略p >可能会导致代码块也受到css的影响。这可能不是我们想要的。

当然，您也可以使用它来更改其他属性，如background-color、font-family等。

我正在运行带有Material主题的MkDocs v1.1.2。