如何在 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 （或任何您的数据语言）放入代码块的右上角。 这确实意味着您必须为每个突出显示块设置语言。