aDOMonitions

Styled admonition callouts generated on page load, for static site generators whose Markdown renderer doesn’t support them.

Check out the Quickstart to use it right away!

See the Demo page for all callout types and themes:

Wait, but what is it?

Admonitions are highlighted callout boxes (“Note”, “Warning”, “Tip”, etc.) used to draw attention to important content. Normally Markdown renderers only support these via build-time plugins, so without them the markers end up as plain text in the HTML.

aDOMonitions is a JavaScript library that scans the DOM for admonition markers in HTML generated by a static site generator without admonition support. It then transforms the corresponding HTML into styled, accessible callout boxes with icons, colours, and ARIA roles.

Before

A GitHub-style (or Docusaurus-style) admonition in Markdown:

> [!WARNING]
> This will delete all data.

Is rendered as plain HTML by most static site generators:

<blockquote>
  <p>[!WARNING]</p>
  <p>This will delete all data.</p>
</blockquote>

After

Running aDOMonitions transforms it into a styled callout box:

<div class="adomonitions adomonitions-warning" role="alert" aria-label="Warning">
  <p class="adomonitions-title">
    <span class="adomonitions-icon" aria-hidden="true"><!-- SVG --></span> Warning
  </p>
  <p>This will delete all data.</p>
</div>

Features

• Zero dependencies, single script tag, no build step required
• Two trigger styles, GitHub ([!TYPE] blockquotes) and Docusaurus (:::type fences)
• Four bundled themes, default-* (light, dark or auto), github-* (light, dark or auto), material, docusaurus
• Accessible, ARIA roles and labels on every callout
• Scoped scanning, target a specific container instead of the whole page
• BYO CSS, skip the built-in themes and use your own existing or new styles
• ESM and UMD, works with bundlers or a plain <script> tag