Jekyll/Rouge - highlighted code blocks nested

Question

I have switched from github pages to hosting my own site. As a result of this migration I got the syntax highlighting blocs to be nested.

<div class="highlighter-rouge">
  <div class="highlight">
    <pre class="highlight">
        <code>
        ... ... ...
        </code>
    </pre>
  </div>
</div>

When rendered it looks like:

The style related settings in _config.yml are:

kramdown:                                         
  syntax_highlighter: rouge                                      

sass:                                                     
  style: :expanded

Setting syntax_highlighter: none removes the highlighting related classes (this is just to give more info, the code is just verbatim then, not highlighted in a block):

<pre>
  <code>
  ... ... ...
  </code>
</pre>

Looking for ideas on how to diagnose this further?

Nannie

Answer 1

There seems to have been a related discussion about this previously happening here.

The solution is to modify a css entry in _sass/_highlights.scss so that .highlight is replaced with pre.highlight

Nannie