在 pandoc 中设置 pre 块的样式而不影响突出显示答案

【问题标题】：Style pre blocks in pandoc without affecting highlighting在 pandoc 中设置 pre 块的样式而不影响突出显示
【发布时间】：2017-03-06 03:51:49
【问题描述】：

我正在使用pandoc 设置一个文档准备系统，作为该练习的一部分，我正在尝试编写一个样式表以使 html 输出看起来不错。

我们的文档包含一些任意预格式化文本（shell 会话、配置文件等）和一些包含源代码的部分。对于后者，我希望应用高亮显示。

我的问题是，我找不到一种方法来将格式应用于任意预格式化文本的 <pre> 部分，而不会弄乱突出显示的源代码。

考虑这个例子：

The config file should look like this

~~~
[SomeThing]
foo=1
bar=2
~~~

The code should look like this:

~~~ { .perl .numberLines }
while (<>) {
    next unless /needle/;
}
~~~

pandoc 的相关输出如下所示：

<body>
<p>The config file should look like this</p>
<pre><code>[SomeThing]
foo=1
bar=2</code></pre>
<p>The code should look like this:</p>
<div class="sourceCode"><table class="sourceCode perl numberLines"><tr class="sourceCode"><td class="lineNumbers"><pre>1
2
3
</pre></td><td class="sourceCode"><pre><code class="sourceCode perl"><span class="kw">while</span> (&lt;&gt;) {
    <span class="kw">next</span> <span class="kw">unless</span> <span class="kw">/</span><span class="ot">needle</span><span class="kw">/</span>;
}</code></pre></td></tr></table></div>
</body>

请注意，突出显示的源代码包含在具有类“sourceCode”的<div> 中。在那个 div 里面有两个不同的 <pre> 元素，它们都没有一个类。

为任意预格式化文本生成的<pre> 没有类，但我想对其应用样式。

这是我迄今为止尝试过的：

如果我像这样将我的样式应用到 pre 块：
```
pre {
    border-color: #CFCFCF;
    background-color: #F7F7F7;
    /* ...etc ...*/
}
```
然后可以预见的是，它也将它们应用于所有 <pre> 元素，从而弄乱了源代码突出显示。
我当然可以手动为所有的任意预格式化文本块添加一个类，例如：
```
~~~ { .myclass }
text goes here
~~~
```
确实有效，<pre> 元素获得了“myclass”类，因此我可以设置它们的样式。但我不喜欢这种解决方案，因为它太容易出错：依赖文档作者知道将此类添加到所有预格式化的文本部分。
我曾尝试使用 CSS 否定伪选择器，但我发现它们 cannot be used to select elements which do not contain some specific ancestor。
我尝试制定两条规则，一条为我的<pre> 块设置样式，另一条将所有应用的样式删除回“继承”任何<pre> 的“继承”，它是div.sourceCode 的后代。那也没用。

理想情况下，我希望能够配置 pandoc 以将默认样式应用于它发出的所有 <pre> 元素（如果没有应用突出显示）。

或者，我可以使用一些 CSS 魔法来为这些 <pre> 元素应用样式，而不会影响那些具有源代码突出显示的元素。

我知道我可以编写一个 pandoc 过滤器来实现这一点，但我希望有一个更简单的解决方案。

【问题讨论】：

标签： html css pandoc

【解决方案1】：

使用以下 CSS：

*:not(.sourceCode):not(td) > pre {
  background-color: red;
}

*:not(.sourceCode):not(td) > pre {
  background-color: red;
}

<p>The config file should look like this</p>
<pre><code>[SomeThing]
foo=1
bar=2</code></pre>
<p>The code should look like this:</p>
<div class="sourceCode"><table class="sourceCode perl numberLines"><tr class="sourceCode"><td class="lineNumbers"><pre>1
2
3
</pre></td><td class="sourceCode"><pre><code class="sourceCode perl"><span class="kw">while</span> (&lt;&gt;) {
    <span class="kw">next</span> <span class="kw">unless</span> <span class="kw">/</span><span class="ot">needle</span><span class="kw">/</span>;
}</code></pre></td></tr></table></div>

【讨论】：