我正在使用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> (<>) {
<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否定psuedoselectors,但我发现他们cannot be used to select elements which do not contain some specific ancestor。
我尝试制作两个规则,一个用于设置我的<pre>
块的样式,另一个用于将所有应用的样式删除回“继承”任何<pre>
的后代div.sourceCode
1}}。这也不起作用。
理想情况下,我希望能够配置pandoc以将默认样式应用于它发出的所有<pre>
元素(如果没有应用突出显示)。
或者,我是否可以使用一些CSS魔法将样式应用于这些<pre>
元素,而不会影响那些具有源代码突出显示的元素。
我知道我可以编写一个pandoc过滤器来实现这一点,但我希望有一个更简单的解决方案。
答案 0 :(得分:1)
使用以下CSS:
*:not(.sourceCode):not(td) > pre {
background-color: red;
}
*: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> (<>) {
<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;