Typographic callout library for editorial-quality HTML output. Use when generating content that needs pull quotes, sidebars, margin notes, callouts, drop caps, code blocks, highlights, or magazine-style two-column layouts. Converts markdown patterns (GitHub-style alerts, blockquotes, ==highlights==, {badges}, footnotes) to styled components via marginalia-md.js.

Marginalia — Typographic Callout Library

15 components, CSS custom properties, zero dependencies. Dark theme by default.

Setup

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/marginalia@latest/marginalia.css">
<script src="https://cdn.jsdelivr.net/npm/marginalia@latest/marginalia.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/marginalia@latest/marginalia-md.js" defer></script>

JS is optional. CSS handles everything. marginalia-md.js converts the markdown patterns below to styled HTML via Marginalia.md(str).

Markdown Patterns

Write standard markdown. These patterns convert to Marginalia components:

Callouts (GitHub-style alerts)

> [!NOTE]
> Informational aside.

> [!TIP]
> Helpful suggestion.

> [!WARNING]
> Potential pitfall.

> [!IMPORTANT]
> Critical information.

Pull Quote

> Any blockquote without an alert keyword becomes a 3D pull quote.

Explicit Pull Quote

> [!QUOTE]
> Attributed or emphasized quotation.

Sidebar

> [!ASIDE]
> Tangential note that floats beside body text.

Margin Note

> [!MARGIN]
> Escapes to the gutter on wide screens, inline on mobile.

Code Block

```js
function example() { return true; }
```

Inline Elements

==highlighted text==              → themed highlight
`inline code`                     → monospace snippet
{Badge}                           → accent label
{Badge: tip}                      → typed label (tip | warning | important)
[^1](Footnote text here)         → auto-numbered popover footnote

Drop Cap

{dropcap}
Opening paragraph gets a large decorative initial letter.

Collapsible Section

<details>
  <summary>Click to expand</summary>
  <div class="mg-collapse-body">
    Hidden content here.
  </div>
</details>

Conversion

Browser: Marginalia.md(markdownString) returns HTML string. Node: require('./marginalia-md').convert(markdownString) returns HTML string.

Tips

Dark theme by default. Add data-mg-theme="light" to <html> for light mode.
Plain > blockquotes become 3D perspective pull quotes — the signature component. Text auto-aligns toward the border accent.
All components work without JavaScript. JS adds copy buttons, smooth collapse, and lightbox.
Add data-bar="none" to any element to remove the left border accent.
Use data-content="repeat" when quoting source text, data-content="insert" for original commentary.
Wrap content in <div class="mg-spread"> for two-column magazine layout — callouts bridge both columns automatically.