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

Question

我已经看到人们的网站具有类似于降价代码块的代码块。但是，在代码块的侧面或顶部，它会显示代码的语言（例如 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（或任何您的数据语言）放入代码块的右上角。这确实意味着您必须为每个突出显示块设置语言。