如何在 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 （或任何您的數據語言）放入代碼塊的右上角。 這確實意味着您必須為每個突出顯示塊設置語言。