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

【问题标题】：How to show the code language on top of jekyll markdown code block如何在 jekyll markdown 代码块之上显示代码语言
【发布时间】：2021-01-23 00:26:02
【问题描述】：

我看到人们的网站包含类似于降价代码块的代码块。但是，在代码块的侧面或顶部，它将显示代码的语言（例如 html/python/java...）。在 github 页面上使用 jekyll 可以实现吗？我必须做哪些设置才能使语言在代码块的角落可见？谢谢！

【问题讨论】：

标签： markdown jekyll codeblocks github-pages rouge

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

【讨论】：

谢谢，它有效！虽然很长一段时间我都认为它不起作用，因为它被我使用的主题中的某些东西覆盖了。我认为如果我们可以选择 pre 可能会更好看，因为这是一个块元素，而 code 是一个内联元素。但这会超出 Jekyll 生成的代码。