How to show the code language on top of jekyll markdown code block

Question

I've seen people's websites with code blocks that resembles markdown code blocks. However, on the side or top of the code block, it would display the language of the code (e.g. html/python/java...). Is that achievable using jekyll for github pages? What setting would I have to do to make the langugage visible in the corner of the code block? Thanks!

Answer 1

Without getting into too much custom styling, you could start with this CSS:

[data-lang]::before {
  content: attr(data-lang);
  display: block;
  text-align: right;
}

This works off the code blocks that Jekyll generates with the {% highlight %} tags, for example:

<figure class="highlight">
  <pre>
    <code class="language-yaml" data-lang="yaml">
      ...
    </code>
  </pre>
</figure>

This would put yaml (or whatever your data-lang is) into the top right corner of your code block. This does mean you have to set the language for each highlight block.