##mdlib-pure/gfm

Import

import { gfm } from 'mdlib-pure/gfm'

Use

createMarkdown({ plugins: gfm() })

Size

3.92 KB min + gzip

Syntax

GitHub Flavored Markdown: | a | b | tables, ~~strike~~, www. and URL autolinks, - [ ] task lists, [^1] footnotes, > [!NOTE] alerts, and the tag filter for html: true

AST

table { align } › tableRow › tableCell, delete, footnoteReference, footnoteDefinition, footnotes, taskCheckbox, alert { kind }

Reference

API reference: mdlib-pure/gfm

| Plugin | Syntax |
|:--|:--|
| gfm | ~~old~~ new |

- [x] done
- [ ] todo

See www.commonmark.org.[^1]

> [!NOTE]
> An alert.

[^1]: A footnote.

##mdlib-pure/headings

Import

import { headings, toc } from 'mdlib-pure/headings'

Use

createMarkdown({ plugins: [headings({ permalink: true })] })

Size

0.56 KB min + gzip

Syntax

none: a transform over existing headings. GitHub-compatible slugs, duplicates get -1, -2…; prefix: 'user-content-' for untrusted input

AST

sets heading.id; toc(root) returns { depth, id, text }[]

Reference

API reference: mdlib-pure/headings

## Install

### With npm

## Install

toc(md.parse(src))
// [ { "depth": 2, "id": "install", "text": "Install" }, { "depth": 3, "id": "with-npm", "text": "With npm" }, { "depth": 2, "id": "install-1", "text": "Install" } ]

##mdlib-pure/container

Import

import { container } from 'mdlib-pure/container'

Use

createMarkdown({ plugins: [container()] })

Size

0.81 KB min + gzip

Syntax

::: kind Title … :::, nestable with longer fences (::::)

AST

container { kind, title, children } → <div class="md-container md-container-KIND">

Reference

API reference: mdlib-pure/container

::: warning Before you publish
Run `npm run verify`.
:::

##mdlib-pure/math

Import

import { math } from 'mdlib-pure/math'

Use

createMarkdown({ plugins: [math()] })

Size

0.94 KB min + gzip

Syntax

$…$ (pandoc rules: $5 and $6 stays text), $$…$$ in a paragraph, $$ fenced blocks; output works as-is with KaTeX auto-render or MathJax

AST

inlineMath { value, display? }, math { value, meta }

Reference

API reference: mdlib-pure/math

Inline $e^{i\pi} + 1 = 0$, and a block:

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

##mdlib-pure/mermaid

Import

import { mermaid, renderMermaid } from 'mdlib-pure/mermaid'

Use

createMarkdown({ plugins: [mermaid()] }) · await renderMermaid(el, { load: () => import('mermaid') })

Size

1.49 KB min + gzip

Syntax

fenced code blocks with the info string mermaid (as on GitHub and GitLab); renderMermaid() loads Mermaid only when a page has diagrams, uses securityLevel: 'strict', colors them from the --md-* tokens and redraws them when the color scheme changes

AST

mermaid { value } (replaces the code node)

Reference

API reference: mdlib-pure/mermaid

```mermaid
flowchart LR
  md[Markdown] --> mdlib[mdlib-pure] --> svg[Diagram]
```

flowchart LR
  md[Markdown] --> mdlib[mdlib-pure] --> svg[Diagram]

##mdlib-pure/deflist

Import

import { deflist } from 'mdlib-pure/deflist'

Use

createMarkdown({ plugins: [deflist()] })

Size

1.22 KB min + gzip

Syntax

Term on one line, : Definition below (Pandoc and PHP Markdown Extra style)

AST

definitionList { spread } › definitionTerm, definitionDescription { spread }

Reference

API reference: mdlib-pure/deflist

Parser
: Turns lines into blocks, then text into inlines.

Renderer
: Turns the tree into HTML or DOM.

##mdlib-pure/mark

Import

import { mark } from 'mdlib-pure/mark'

Use

createMarkdown({ plugins: [mark()] })

Size

0.13 KB min + gzip

Syntax

==text==, with the flanking rules of *

AST

mark { children } → <mark>

Reference

API reference: mdlib-pure/mark

This is ==very== important.

##mdlib-pure/frontmatter

Import

import { frontmatter, getFrontmatter } from 'mdlib-pure/frontmatter'

Use

createMarkdown({ plugins: [frontmatter()] })

Size

0.57 KB min + gzip

Syntax

--- (YAML) or +++ (TOML) on the first line, up to the closing line; not rendered

AST

yaml { value } or toml { value }, first child of root; getFrontmatter(root) returns { type, value } | null

Reference

API reference: mdlib-pure/frontmatter

---
title: Hello
---
# Body

getFrontmatter(md.parse(src))
// {"type":"yaml","value":"title: Hello"}

##mdlib-pure/adapter

Import

import { toElements } from 'mdlib-pure/adapter'

Use

toElements(md.toVNodes(src), createElement, 'react')

Size

0.53 KB min + gzip

Syntax

none: converts VNodes with the framework’s own h/createElement; presets react, preact, vue

AST

no node: works on the VNodes of md.toVNodes()

Reference

API reference: mdlib-pure/adapter

**Rendered** by React 19 at build time.

##mdlib-pure/element

Import

import { defineElements } from 'mdlib-pure/element'

Use

defineElements({ loaders }) · <mdlib-editor plugins="all" value="# Draft">

Size

20.19 KB min + gzip, core and every plugin included

Syntax

every plugin on this page, chosen per element with plugins="gfm math" or plugins="all"; KaTeX and Mermaid through loaders, fetched only when a document uses them; raw HTML and functions only through named configs, never from attributes; styles in mdlib-pure/editor.css

AST

no node of its own: getMarkdown(plugins, config) returns the instance behind an element, to parse() its text

Reference

Guide: Web Components

<mdlib-markdown class="md" plugins="gfm" source="
| Element | For |
|:--|:--|
| `mdlib-markdown` | reading |
| `mdlib-editor` | writing, with a live preview |"></mdlib-markdown>

Try the live editor and viewerThe Blazor wrapperThe Angular wrapper

##mdlib-pure/entities

Import

import { decodeEntity } from 'mdlib-pure/entities'

Use

createMarkdown({ decodeEntity })

Size

10.75 KB min + gzip

Syntax

named entities such as ½ or ♥ outside the browser (in browsers the core decodes them through the DOM)

AST

no node: decoded entities become text

Reference

Getting started: Node, SSR, workers

Half: ½, love: ♥, copyright: ©

<!-- Node, default decoder -->
<p>Half: &amp;frac12;, love: &amp;hearts;, copyright: &amp;copy;</p>
<!-- Node, with decodeEntity -->
<p>Half: ½, love: ♥, copyright: ©</p>

##Write your own

A plugin is a plain object with block, inline, delimiters, transform and render fields. AGENTS.md explains how to choose the extension point and has a recipe for each; templates/plugin in the repository is a complete, tested plugin to copy. It is written so that an AI agent can follow it: see For AI agents.