如何更改默认 Markdown 的内联突出显示样式？答案

【问题标题】：How to change default markdown's inline highlight style?如何更改默认 Markdown 的内联突出显示样式？
【发布时间】：2015-02-24 19:42:03
【问题描述】：

我在 Python 中使用 pelican 来生成静态页面。使用 Markdown 和 Pygment 突出显示代码块很好，但是当涉及到内联突出显示时，存在显着差异。

请查看my page。页面处于深色背景中，但带有反引号 `` 的内联突出显示为白色背景。

降价代码是

To clearify what exactly the command returns, 
one can use `pack('>i', -2500).encode('hex')`{.python}. 
Or I have a more complex solution like, `''.join(r'\x%02X' 
% ord(ch) for ch in src)`{.python}.

那么这里的问题是如何定义内联高亮样式？

我尝试在 pelican 主题中更改 pygments default.css 文件，但没有成功。

我找到了一些相关链接：

【问题讨论】：

标签： python markdown pygments pelican

【解决方案1】：

Pelican 使用 Python-Markdown 和 CodeHilite 扩展将代码 blocks 传递给 Pygments。请注意，代码blocks确实不包含内联代码sn-ps。事实上，我不知道任何支持突出显示内联代码的 Markdown 解析器。通常，内联代码 sn-ps 太短而无法有效突出显示，并且几乎总是太短而无法利用 Pygments 的语言猜测算法。

我看到您尝试使用 Attribute List 扩展名通知 Markdown 该语言。但是，所做的只是将一个类添加到包装了代码 sn-p 的 HTML <code> 标记中。由于 CodeHilite 扩展只适用于块，它甚至从不查看它，当然也不会将它传递给 Pygments。

您有几种不同的选择（每一种都增加了所需的工作量）：

您可以编写自己的 CSS 来更改背景和文本颜色，以便它们与块匹配。你不会得到语法高亮，但内联代码 sn-ps 至少会匹配你的主题。无需在这里定义语言。
您可以使用 JavaScript 代码高亮库根据您使用属性列表扩展定义的语言高亮显示所有代码 sn-ps。但是，这可能需要您重新定义 JS 库的 CSS，使其与 Pygments 的输出相匹配。
您可以编写自己的 Python-Markdown 扩展（或者可能是 fork CodeHilite），除了块之外，它还突出显示内联代码 sn-ps。

就个人而言，我会推荐上面的（1）。实际上，查看您的页面，代码块似乎定义了以下内容：

.highlight pre, .highlighttable pre {
    background: #272822;
    color: #f8f8f2;
}

也就是说，父元素分配了“highlight”类（或“highlighttable”类）的<pre>元素将以这些颜色显示。由于您希望将相同的颜色分配给内联代码，请添加以下规则：

code {
    background: #272822;
    color: #f8f8f2;
}

请确保在 Pelican 主题定义的样式之后定义它（似乎在 http://vfxware.com/theme/css/bootstrap.slate.min.css 中）。

当然，您可以更改现有的 CSS，但是如果您以后决定更新到新版本的主题或完全更改主题，您可能需要重新定义自己的规则。因此，我喜欢在一个单独的文件中定义我自己的一组覆盖，我始终确保是最后一个加载的文件。

【讨论】：

从我的问题链接stackoverflow.com/questions/10870719/…，看起来可以做内联高亮，所以你的意思是正常的降价不支持这个？
@tomriddle_1234 是的，这是正确的。这不是 Markdown 的典型特征。在您链接到一个之前，我不知道有任何支持此功能的 Markdown 实现。我的猜测是该实现是唯一支持该功能的实现。由于我的回答中所述的原因，我质疑它始终把事情做好的能力。

【解决方案2】：

我经常被这个咬伤。我的问题是我在升级 Pygment 模块时使用了旧模板的旧 pygment.css 文件（CSS 没有赶上 Pygment 插件。

在我的例子中，旧的 Pygment CSS 使用的是 HTML 标记类 highlight，而它应该使用新的 Pygment 代码现在使用的新的 codehilite 类名。（感谢Firefox->Windows->Web Developer->Toggle 菜单选项指出这个“破损”。

替换 pygments.css CSS 样式文件可以恢复这种急需的代码语法突出显示功能。

要重新生成pygments.css 文件，请执行：

pygmentize -S default -f html -a .codehilite > pygments.css

或者对于较暗的主题，使用 Pygmentize monokai 样式，如 pygmentize -L 中所列：

pygmentize -S monokai -f html -a .codehilite > pygments.css

同样，问题在于 Pygments 将其 HTTP 标记类从较旧的 highlight 更改为较新的 codehilite。

【讨论】：