Problem rendering code blocks with Jekyll in .github.io site

Question

The problem

My post containing some code blocks renders them like "box in a box". This is the post: https://telatin.github.io/N50-with-conda/ and here what I see from Firefox: http://prntscr.com/oujb6u

The code

This is the source code: https://raw.githubusercontent.com/telatin/telatin.github.io/master/_posts/2019-08-19-N50-with-conda.md

I'm new in using Jekyll, and I tried both triple backticks (as I usually do in GitHub, and the four-spaces at the begin of the line (current implementation). Both renders the same.

Question

I don't understand if the problem is in the code I write or in the template I'm using. What should I do to have a nicer output (single framed)?

Answer 1

If you inspect the generated HTML, you'll see that there are nested blocks with the same class .highlight:

<div class="highlighter-rouge">
  <div class="highlight">
    <pre class="highlight">
      <code>CHECK=$(n50 contigs.fasta)</code>
    </pre>
  </div>
</div>

What you can do is alter your CSS to be more specific:

i.e. instead of .highlight, use div.highlight for base code-block styles and use
div.highlight > pre.highlight to style the pre block elements if required.