Examples › Track 1 — Parser › Example 3

Custom fence plugin

A fence_plugin lets you render any code fence type with your own HTML. Here we add four "callout" fence types — info, warn, error, tip — to vanilla quikdown in about 20 lines.

Live demo

Markdown source

Rendered output

The fence plugin

const ICONS = { info: 'ℹ', warn: '⚠', error: '✖', tip: '💡' };

const calloutPlugin = {
  render(content, lang) {
    if (!ICONS[lang]) return undefined;  // ← let other fence types fall through
    return `<div class="callout callout-${lang}">` +
      `<div class="callout-icon">${ICONS[lang]}</div>` +
      `<div>${content.trim()}</div>` +
      `</div>`;
  }
};

// Use it like any other parser option
const html = quikdown(markdown, { fence_plugin: calloutPlugin });

What to know

  • The plugin's render(content, lang) is called for every fenced code block.
  • Return a string of HTML to use as the rendered output, or return undefined / null to fall through to quikdown's default code-block rendering.
  • This is how SVG, Mermaid, MathJax, GeoJSON, and CSV rendering work in quikdown_edit — they're all just fence plugins shipped pre-installed.
  • For bidirectional editing, plugins also implement a reverse(node) method. See bd-roundtrip for the round-trip story.