Nested <pre> tags cause output errors

[williamcanin]

First, congratulations for the plugin.
Next, when using "linenos" the highlight ...
Example:
{% highlight ruby linenos %}
... my block that is between the "highlight" is not compressed properly in html.

The question is whether there is configuration to work around this problem or if this is a weak point in the plugin.

Thanks

[jnvsor]

Could you provide the uncompressed output HTML?

Most likely it's because highlighting is wrapped in a <pre> tag - the whole point is that it preserves whitespace in code and the like (Otherwise everything in your block would be on the same line and with no indentation, just how html works)

[williamcanin]

I auditioned with a simple Jekyll project:
$ jekyll new project
Just put the "linenos" on the "highlight"

[jnvsor]

I can confirm this is because of the <pre> tag.

HTML collapses whitespace by default, the <pre> tag is there to preserve whitespace in the source - commonly used (As in the case of highlight) to keep newlines and indentation in the end result.

For reference, here's what it would look like if we collapsed that part like you asked:

You can read more about pre and white-space on MDN.

[jnvsor]

Ah, it seems I misunderstood - when doing a "Double highlight" like that you get nested pre tags - that's something we haven't implemented (Because I never thought I'd actually see them in the wild)

It seems more like a bug in the highlighter but I'll take a look

[williamcanin]

Exactly, that's it. thank you

[jnvsor]

@williamcanin I know from experience that getting nested anything to work in liquid is really really hard so I wouldn't expect this to get done any time soon if I were you.

Instead it might be more productive to tweak Jekyll itself at tags/highlight.rb:116 to remove the outer <pre> tag then style away the difference:

"<figure class=\"highlight\"><code #{code_attributes}>#{code.chomp}</code></figure>"

[williamcanin]

Thanks for the sugestion. I will do that.

[DeXP]

I have the same issue with rouge highlighter, the "linenos" breaks html output. Yep, rouge doubles "pre" tags. But it is the only way now on github's servers...

[DeXP]

Workaround to avoid this bug. Initially you have the code like:

{% highlight AnyLanguage linenos %}
Some code
{% endhighlight %}

Change it to:

{% capture _code %}{% highlight AnyLanguage linenos %}
Some code
{% endhighlight %}{% endcapture %}{% include fixlinenos.html %}{{ _code }}

_include/fixlinenos.html content:

{% if _code contains '<pre class="lineno">' %}
    {% assign _code = _code | replace: "<pre><code", "<code" %}
    {% assign _code = _code | replace: "</code></pre>", "</code>" %}
{% endif %}