Hugoで楽譜を描画する(abcjs)

abcjsというABC記譜法で書いたテキストから楽譜を描画するライブラリを使って、Hugoで作成するページで楽譜を表示できるようにする。

music-abcを指定したコードブロックに対して処理するようにレンダーフックを定義する。

layouts/_default/_markup/render-codeblock-music-abc.html

{{- $src := .Inner | safeHTML }}
{{- $uuid := md5 $src }}
<div id="{{- $uuid }}"></div>
<script>
  window.addEventListener('load', function(){
    const src = `{{ $src}}`;
    ABCJS.renderAbc("{{- $uuid }}", src, { responsive: "resize" });
  });
</script>
{{ .Page.Store.Set "hasMusicAbc" true }}

楽譜を描画するエリア（<div id="{{- $uuid }}"></div>）のIDを決め打ちにしてしまうと、ノート内に複数のコードブロックを書けないのでMD5ハッシュを生成し、IDとして使用した。

layouts/partials/head.html

  {{ if .Page.Store.Get "hasMusicAbc" }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/abcjs/6.1.7/abcjs-basic-min.js"></script>
  {{ end }}

ヘッダにabcjsをロードする処理を追加。ページ内にmusic-abcを指定したコードブロックがある場合（hasMusicAbcがtrue）のみロードするようにした。

obsidian-plugin-abcjsに楽譜の表示例がある。