是否可以在 Markdown 的代码/预标记中保留 css 样式？答案

【问题标题】：Is it possible to keep css style in a code/pre tag in markdown?是否可以在 Markdown 的代码/预标记中保留 css 样式？
【发布时间】：2020-01-29 17:27:09
【问题描述】：

我在编写 Markdown 文档时遇到问题。

我想插入一个从控制台输出的差异代码，包含颜色，通过脚本转换为 HTML，如下所示：

# Some title

The following code as been updated:

<pre>
<code>
<span style="color:green;">+</span><span style="color:green;">    if ($url !== $newUrl) {</span>
<span style="color:green;">+</span><span style="color:green;">        $newDomain = parse_url($newUrl, PHP_URL_HOST);</span>
</code>
</pre>

**Thank you**

我添加了一些 Markdown 只是为了显示一些上下文。

问题是，使用pre/code，代码结构是正确的（格式正确的行）。如果我更改它（切换到code/pre），或者将code 或pre 更改为div，我会丢失换行符或着色。

这是上述降价的输出：https://fiddle.md/tmvmwvztfd5d92xk65dwfx

【问题讨论】：

不知道你为什么想要code/pre。有效的 HTML 是 pre/code。有什么理由不能使用pre/code？
按这个顺序使用pre/code时，结构是正确的，有空格等，但是里面的html被去掉了，这不是我想要的。我想将 html 保留在里面（用于样式）。尝试其他替代方案并没有产生更好的结果。这就是我问的原因:)

标签： html markdown pre

【解决方案1】：

我知道 Github 有一个 diff 表达式可以让你做这样的事情：https://gist.github.com/salmedina/ad8bea4f46de97ea132f71b0bca73663#file-markdowndiffexample-md

但我认为在 Markdown 中没有这样的方法可以做你想做的事情。

问候。

【讨论】：

整洁！我只需要使用具有差异语法着色的 Markdown 处理器：/
任何语法高亮器（pygments、highlight.js 等）都应该能够将diff 作为“语言”处理并输出彩色代码块。只需将荧光笔的 HTML 输出按原样插入到您的 Markdown 文档中。当然，您可能还需要确保呈现的文档指向荧光笔期望定义的 CSS 规则。