2

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

Tim
  • 3,178
  • 1
  • 13
  • 26

1 Answers1

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.

Ross
  • 2,701
  • 16
  • 25
  • Thanks, it works! Though for a long time I thought it didn’t work because it was overwritten by something in the theme I was using. I think it may look better if we can select `pre` instead since that’s a block element while `code` is an inline element. But that would go beyond the Jekyll generated code. – Tim Feb 16 '21 at 15:39