Understanding the output for syntax highlighter

[moonglum]

First off: Thanks for this amazing project, I've used it so many times over the years, and love it ❤️

I'm not sure, if this is output from kramdown or rouge, but I'll start here 😄 Please redirect me, if that's the wrong place.

Given the following input:

~~~ruby
puts 'hi'
~~~

I get the following output with the default configuration (indented for better readability):

<div class="language-ruby highlighter-rouge">
    <div class="highlight">
        <pre class="highlight">
            <code><span class="nb">puts</span> <span class="s1">'hi'</span></code>
        </pre>
    </div>
</div>

To me, that seems like at least one level of wrapper too much: Why do we need to wrap the pre tag with two divs?
From a CSS perspective, it's also a bit inconvenient to have the same class (highlight) on two elements.

What is the reason for this decision? And is it possible to configure it differently as a user?

[gettalong]

Thanks! 😄

kramdown itself doesn't know what the specific syntax highlighter does. It may as well just output plain text without any HTML tags at all. This is the reason why kramdown adds the outer-most <div> tag so that a highlighted codeblock can always be determined. Another reason is that this <div> tag will get all attributes specified for the codeblock.

The inner CSS class attribute for the <pre> tag comes from the syntax highlighter option 'css_class' which gets assigned the value 'highlight' if it is not set, for backwards-compatibility. So you can get rid of that if you need to, e.g.

$ kramdown --syntax-highlighter-opts "{css_class: ''}"
~~~ruby
puts 'hi'
~~~
^D
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class=""><code><span class="nb">puts</span> <span class="s1">'hi'</span>
</code></pre></div></div>

As for why there is a <pre> tag inside a <div> tag: This is a rouge question. My guess is that the outer <div> is there for the same reason as kramdown has for its <div> (rouge can output the highlighted code using a <pre> tag but - I think - in table mode it uses an inner <div> tag).

[moonglum]

Thank you so much for the context! That helps 🙇