Marked ABC

Render sheet music with ABCjs in Markdown documents using Marked.

Usage

This only renders in the browser, as ABCjs cannot operate without access to the DOM.

import {Marked} from "marked";
import markedAbc from "marked-abc";

const marked = new Marked();

marked.use(markedAbc().extension);

marked.parse(`
  <score lang="ABC">
    X: 1
    T: Epitome of an Enigma
    C: Zarhym Raider
    M: 2/2
    L: 1/8
    K: C#min
    G2|g2 fe d2 c2 | B2 F2 G2 EF | G2 AB A2 G2 | F2 D2 E2 |]
  </score>
`);
// Beautifully formatted sheet music as the output

Usage with server-side rendering

When this extension is used in a server-side context, it will fall back to rendering plaintext. When the Markdown element is mounted, you can convert these elements to rendered notation by using the returned forceRenderAll function.

const abc = markedAbc();

marked.use(abc.extension);

onMount(() => abc.forceRenderAll());

Options

• abcOptions: options for abcjs.renderAbc
• sanitizer: function to sanitize abcJS score. To minimize dependencies, this library only performs basic escaping to HTML, meaning that maliciously-crafted scores could perform an XSS attack. If your scores are user-generated and can be shared, you should use a library such as DOMPurify to maximize the safety of the rendering.