/ TECH

コードブロックにファイル名を表示する

Qiita のようにコードブロックの左上にファイル名を表示する.

記法

how-to-write.png

  
# あとは通常通り
print("codeをかく")

変更点

script.js

  
document.addEventListener("DOMContentLoaded", () => {
  const code = document.getElementsByTagName("code");
  Array.from(code).forEach((el) => {
    if (el.className) {
      const s = el.className.split(":");
      const highlightLang = s[0];
      const filename = s[1];
      if (filename) {
        el.classList.remove(el.className);
        el.classList.add(highlightLang);
        el.setAttribute("filename", filename);
        el.classList.add("code-block-header");
      }
    }
  });
});

highlight.jsは,<pre><code>...</code></pre>内を解釈するので,<code>内のクラス名が

言語:filename

となっている箇所を見つけ,”:”でsplitして表示したいファイル名を取得する.
取得した情報は,setAttribute("filename",filename)にて渡す.
また,ファイル名を表示するため,新たなclass code-block-header を追加.

任意のhtml

  
<script src="/assets/js/script.js"></script>
<link rel="stylesheet" href="/assets/js/qtcreator_dark.css" /><!--任意のテーマのcss-->
<script src="/assets/js/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>

上をハイライトしたいページの<head>に追加 highlight.jsを公式サイトから, リンク先のCustom packageでハイライトさせたい言語を選択してDL.
解凍して,highlight.pack.jsと任意のテーマのCSS(今回は,styles/qtcreator_dark.css)を/assets/jsに保存.

screen.css


.code-block-header:before {
  display: inline-block;
  padding: 2px;
  margin-bottom: 1rem;
  content: attr(filename);
  color: white;
  background-color: #464646;
}
  • display:inline-block;
    背景の灰色(#464646)が文字列の長さ分になる.
  • content:attr(filename);
    code-block-headerfilenameの値を取得する.

_config.yml

  
markdown: kramdown
kramdown:
  syntax_highlighter_opts:
    disable: true
#highlighter: rouge

最後に,GitHubPagesでデフォルトで適用されるRougeを無効化する.

オマケ

VScodeにてmarkdownファイルを編集していると,prettierが勝手にspaceをtrimmingしてしまうことがある.
これでは,ファイル名を記載した下の行のspace*2も消されてしまうので,設定を変更する.

how to add Disable Languages in prettier

VScodeを開いてctrl+,で設定を開き,検索窓にprettierと入力.
prettier.png Disable Languages項目を追加からmarkdownを追加して再起動すればprettierが無効化される.

teahat

teahat

I'm t3ahat.

Read More

Tags

Latest Posts