如何在 jekyll markdown 代码块上显示代码语言

Question

我见过人们的网站有类似于 Markdown 代码块的代码块。但是，在代码块的侧面或顶部，它会显示代码的语言（例如 html/python/java...）。在 github 页面上使用 jekyll 可以实现吗？我需要做哪些设置才能使代码块角落中的语言可见？谢谢！

Answer 1

在不涉及太多自定义样式的情况下，您可以从这个 CSS 开始：

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

这适用于 Jekyll 生成的带有 {% highlight %} 标签的代码块，例如：

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

这会将 yaml（或任何您的数据语言）放入代码块的右上角。这确实意味着您必须为每个突出显示块设置语言。