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

Question

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

Answer 1

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

1. 右键单击页面上的内嵌代码元素
2. 选择“检查元素”(Firefox) 或“检查”(Chrome)
   这将打开检查工具，您可以在其中查看已应用于站点上每个元素的 CSS。确保检查员坐在 <code></code> 线上。
3. 找到显示 color
的条目
4. 找到呈现颜色的 CSS 选择器

就我而言，CSS 选择器是 .md-typeset code。

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

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

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

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

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