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

user_10957844 0
Viewed 377

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!

enter image description here

codeblocks rouge jekyll github-pages markdown
1 Answers

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.

user_54775610
Related