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 | ||<