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

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