CODEWITHSUNDEEP
htmlcsspandoc
harmic
harmic

Reputation: 30597

Style pre blocks in pandoc without affecting highlighting

I'm setting up a document preparation system using pandoc, and as part of that exercise I am trying to write a style sheet to make the html output look good.

Our documents have some sections of arbitrary preformatted text (shell sessions, config files, etc) and some containing source code. For the latter I would like to have highlighting applied.

My problem is that I can't find a way to apply formatting to the <pre> sections for the arbitrary preformatted text without messing up the highlighted source code.

Consider this example:

The config file should look like this

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

The code should look like this:

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

The relevant output from pandoc looks like this:

<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>

Note that the highlighted source code is contained within a <div> that has class "sourceCode". Inside that div there are two different <pre> elements, neither of which has a class.

The <pre> which is generated for the arbitrary preformatted text does not have a class, but I would like to apply styles to it.

This is what I have tried so far:

  1. If I just apply my styles to the pre block like this:

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

    then predictably it also applies them to all the <pre> elements, messing up the source code highlighting.

  2. I can of course manually add a class to all the arbitrary preformatted text blocks, such as:

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

    That does work, the <pre> elements get the class "myclass" so I can style them. But I don't like that solution because it is too error prone: relying on the document authors to know to add this class to all the preformatted text sections.

  3. I have tried using CSS negation psuedoselectors, but I found they cannot be used to select elements which do not contain some specific ancestor.

  4. I tried making two rules, one to style my <pre> block, and another to remove all the applied styles back to "inherit" for any <pre> that was a descendant of div.sourceCode. That did not work either.

Ideally, I would like to be able to configure pandoc to apply a default style to all the <pre> elements it emits (if no highlighting was being applied).

Alternatively, is there some CSS magic I can use to apply a style to these <pre> elements without affecting those that have source code highlighting.

I am aware that I could write a pandoc filter which might achieve this, but I was hoping for a simpler solution.

Upvotes: 3

Views: 573

Answers (1)

mb21
mb21

Reputation: 39373

Use the following 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>

Upvotes: 2

Related Questions