Inconsistent code block among different syntax

[ketozhang]

While Jekyll do recommend liquid code blocks {% highlight language %} ... {% endhighlight %}, I find it these uncommon and inconvenient. I often use Github fenced code blocks with ``` code ``` instead. On chalk, the liquid code block renders differently than both Github and Kramdown's flavor.

# Kramdown's Fenced

~~~html
<!-- This is a comment -->
<div class="grid">
  <h1>This is a heading</h1>
  <p>
    This is a paragraph text.
  </p>
</div>
~~~

# Github's Fenced
```html
<!-- This is a comment -->
<div class="grid">
  <h1>This is a heading</h1>
  <p>
    This is a paragraph text.
  </p>
</div>

The margins in these code blocks are too big

{% highlight html %}
<!-- This is a comment -->
<div class="grid">
  <h1>This is a heading</h1>
  <p>
    This is a paragraph text.
  </p>
</div>
{% endhighlight %}

This is perfect

Is there a simple CSS fix to this?

[nielsenramon]

@ketozhang Can you inspect and check if there is an element that is duplicated or that gets extra padding?

[ketozhang]

I've forgotten about this since I put the website on hold sorry about that. It's quite obvious something is wrong. The kramdown and github flavor fences are being treated with the same structure as inline code:

Actual

<div class="language-html highlighter-rouge">
    <div class="highlight">
        <pre class="highlight">
            <code>
                <!-- spans -->
            </code>
        </pre>
    </div>
</div>

Expected

<figure class="highlight">
    <pre>
        <code class="language-html" data-lang="html">
            <!-- spans -->
        </code>
    </pre>
</figure>

[akashjobanputra]

@nielsenramon highlight class is introducing the extra margin and padding in Github fenced code blocks too.
using {% highlight bash %}:

and using github fenced:

CSS:
_highlights-datk.scss#L8