はてなブログ ABCJS (五線譜) テスト

V:ALL stem=up
U:n=!style=x!
L: 1/4
K:C
V: G
 |E F F ^G | A ^A B c | d ^d e f | g ^g a ^a|
V:M perc
 |z nd z nd | z nd z nd | z nd z nd | z nd z nd |
V:G
K:C
L:1/8
 |EF F^G A^A Bc | d^d ef g^g a^a| bc' ^c'd' e'f' ^f'g' | g'^f' f'e' d'^c' c'b |
V:M perc
L:1/4
 |z nd z nd | z nd z nd | z nd z nd | z nd z nd |

カスタマイズのフッタに

<script src="https://cdn.jsdelivr.net/npm/abcjs@6.2.2/dist/abcjs-basic-min.js"></script>
<script>
Array.from(document.querySelectorAll("pre[data-lang='abc']")).forEach((i) => {
    console.log(i);
    ABCJS.renderAbc(i, i.textContent, { responsive: "resize"});
});
</script>

みたいのを入れる。

デザインCSSに以下のようにかく

pre.lang-abc {
box-sizing: border-box;
background: #fff;
color: #333;
}

super-pre 記法で以下のように書く

>|abc|
V:ALL stem=up
U:n=!style=x!
L: 1/4
K:C
V: G
 |E F F ^G | A ^A B c | d ^d e f | g ^g a ^a|
V:M perc
 |z nd z nd | z nd z nd | z nd z nd | z nd z nd |
V:G
K:C
L:1/8
 |EF F^G A^A Bc | d^d ef g^g a^a| bc' ^c'd' e'f' ^f'g' | g'^f' f'e' d'^c' c'b |
V:M perc
L:1/4
 |z nd z nd | z nd z nd | z nd z nd | z nd z nd |
 ||<