在pandoc中设置pre块而不影响突出显示

时间:2017-03-06 03:51:50

标签: html css pandoc

我正在使用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>没有类,但我想将样式应用于它。

这是我到目前为止所尝试的:

  1. 如果我只是将我的样式应用到pre块:

    pre {
        border-color: #CFCFCF;
        background-color: #F7F7F7;
        /* ...etc ...*/
    }
    

    然后可以预见它也会将它们应用于所有<pre>元素,搞乱了突出显示的源代码。

  2. 我当然可以手动为所有预先格式化的文本块添加一个类,例如:

    ~~~ { .myclass }
    text goes here
    ~~~
    

    这确实有效,<pre>元素获取类“myclass”,因此我可以设置它们的样式。但我不喜欢这种解决方案,因为它太容易出错:依赖文档作者知道将这个类添加到所有预先格式化的文本部分。

  3. 我尝试过使用CSS否定psuedoselectors,但我发现他们cannot be used to select elements which do not contain some specific ancestor

  4. 我尝试制作两个规则,一个用于设置我的<pre>块的样式,另一个用于将所有应用的样式删除回“继承”任何<pre>的后代div.sourceCode 1}}。这也不起作用。

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

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

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

1 个答案:

答案 0 :(得分:1)

使用以下CSS:

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

&#13;
&#13;
*:not(.sourceCode):not(td) > pre {
  background-color: red;
}
&#13;
<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>
&#13;
&#13;
&#13;