Markdown plugins

Updated Nov 1, 2026

Markdown plugins parse Markdown into mdast, extend its syntax and turn mdast into Markdown, HTML trees or natural-language trees. md.parse and md.stringify are the parser and the compiler; a syntax extension such as md.gfm teaches both, so add it beside either.

md.parse

Parses Markdown into an mdast tree, CommonMark as micromark reads it; add syntax extensions such as md.gfm beside it.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.toHtml())
  .use(html.stringify())
  .processSync("# Hello *world*")
file.value
// <h1>Hello <em>world</em></h1>

Follows remark-parse.

No options.

md.directive

Adds generic directives — :text, ::leaf and :::container — read by md.parse and written by md.stringify.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.directive())
  .use(md.stringify())
  .processSync(":::note{.info}\nRead *this*.\n:::")
file.value
// :::note{.info}
// Read *this*.
// :::

Follows remark-directive.

md.gfm

Adds GitHub Flavored Markdown: tables, task lists, strikethrough, autolink literals and footnotes.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.gfm())
  .use(md.toHtml())
  .use(html.stringify())
  .processSync("~~old~~ www.example.com")
file.value
// <p><del>old</del> <a href="http://www.example.com">www.example.com</a></p>

alerts: true also renders GitHub alerts, a block quote opening with [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] or [!CAUTION], as GitHub does: a <div class="markdown-alert markdown-alert-note"> with a title and its Octicon, as remark-github-blockquote-alert writes it. For an MDX component instead, use md.component's alerts.

Follows remark-gfm.

Alerts

md.gfm's alerts: on, or on with remark-github-blockquote-alert's options.

Takes boolean | AlertsOptions.

AlertsOptions

remark-github-blockquote-alert's options.

md.definitionList

Adds definition lists: a term, then lines starting with : that define it.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.definitionList())
  .use(md.toHtml())
  .use(html.stringify())
  .processSync("Apple\n: A fruit.")
file.value
// <dl>
// <dt>Apple</dt>
// <dd>A fruit.
// </dd>
// </dl>

Follows remark-definition-list.

No options.

md.math

Adds math: $$ blocks and $ inline, kept as math nodes for a later stage to render.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.math())
  .use(md.toHtml())
  .use(html.stringify())
  .processSync("Euler: $e^{i\\pi} = -1$")
file.value
// <p>Euler: <code class="language-math math-inline">e^{i\pi} = -1</code></p>

Follows remark-math.

md.mdx

Adds MDX syntax — JSX, {expressions} and import/export — and turns off indented code, autolinks and raw HTML, as MDX does.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.mdx())
  .use(md.stringify())
  .processSync("import {Chart} from './chart.js'\n\n# Sales {year}\n\n<Chart  data={rows}/>")
file.value
// import {Chart} from './chart.js'
//
// # Sales {year}
//
// <Chart data={rows} />

Follows remark-mdx.

md.frontmatter

Reads frontmatter — YAML by default, TOML or your own fences by option — into a node of its own.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.frontmatter(["yaml", "toml"]))
  .use(md.stringify())
  .processSync('+++\ntitle = "Hi"\n+++\n\n# Hi')
file.value
// +++
// title = "Hi"
// +++
//
// # Hi

With data: true it also parses the YAML a document starts with into the file's data.matter, as vfile-matter does ({} when there is none; YAML 1.2's core schema, as the yaml package reads it), and strip: true drops that node from the tree. Invalid YAML fails with invalid-frontmatter. To combine them with other matters, pass { matters, data, strip }.

const withData = textlane()
  .use(md.parse())
  .use(md.frontmatter({ data: true }))
  .use(md.stringify())
  .processSync("---\ntitle: Hello\ntags: [a, b]\n---\n\n# Hello")
withData.data.matter
// { title: "Hello", tags: ["a", "b"] }

Follows remark-frontmatter.

The kinds of matter to recognize, as remark-frontmatter takes them (a preset, a matter, or a list of them; yaml when unset), or textlane's options object.

Takes "yaml" | "toml" | Matter | ("yaml" | "toml" | Matter)[] | FrontmatterSettings.

Matter

One kind of frontmatter: the node type it becomes and its fences, a marker repeated three times or a whole fence.

FrontmatterSettings

textlane's options: the matters, and what to do with YAML frontmatter.

Fence

A fence, or its opening and closing ones.

Takes string | FencePair.

FencePair

Different opening and closing fences.

md.cjkFriendly

Lets *, _ and, with md.gfm, ~ emphasize text next to Chinese, Japanese and Korean characters and punctuation, as remark-cjk-friendly and remark-cjk-friendly-gfm-strikethrough parse it: **これは強調。**です is strong, where CommonMark leaves the asterisks. Text without CJK parses as before. md.stringify does not yet escape emphasis the CJK-friendly way, so Markdown written back may not parse to the same tree.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.cjkFriendly())
  .use(md.toHtml())
  .use(html.stringify())
  .processSync("**これは強調。**です")
file.value
// <p><strong>これは強調。</strong>です</p>

Follows remark-cjk-friendly.

No options.

md.gemoji

Turns gemoji shortcodes such as :tada: into the emoji they name.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.gemoji())
  .use(md.stringify())
  .processSync("Shipped :tada:")
file.value
// Shipped 🎉

emoticon: true also turns emoticons such as :) and :-( into emoji, accessible: true wraps an emoji in <span role="img" aria-label="…"> and padSpaceAfter: true puts a space after each, as remark-emoji's options do. Shortcodes stay gemoji's names, where remark-emoji reads node-emoji's, which name a few emoji differently.

Follows remark-gemoji.

md.smartypants

Turns straight quotes, dashes, dots and backticks in Markdown text into their typographic forms, pairing quotes across links and emphasis, as remark-smartypants does. Code is left alone.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.smartypants())
  .use(md.stringify())
  .processSync(`"Hello" -- it's *done*...`)
file.value
// “Hello” — it’s *done*…

Follows remark-smartypants.

Backticks

Takes boolean | "all".

QuoteCharacters

The quote characters to use for double and single quotes.

Dashes

Takes boolean | "oldschool" | "inverted".

Ellipses

Takes boolean | "spaced" | "unspaced".

md.smartypants

Turns straight quotes, dashes, dots and backticks in Markdown text into their typographic forms, pairing quotes across links and emphasis, as remark-smartypants does. Code is left alone.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.smartypants())
  .use(md.stringify())
  .processSync(`"Hello" -- it's *done*...`)
file.value
// “Hello” — it’s *done*…

Follows remark-smartypants.

Backticks

Takes boolean | "all".

QuoteCharacters

The quote characters to use for double and single quotes.

Dashes

Takes boolean | "oldschool" | "inverted".

Ellipses

Takes boolean | "spaced" | "unspaced".

md.component

Turns directives, GitHub alerts and other nodes into MDX JSX elements, the components an MDX runtime renders, by declarative rules, so a site's :::note or ::button needs no JavaScript plugin. Each directive rule names the directive and the component, where its name and label go, which attributes it keeps, what it requires and whether adjacent elements are grouped, as livemark's cards and tabs are. Code rules (codes) do the same for fenced code: a block becomes a component by its language or a meta key="value", or adjacent blocks are wrapped together, as tabbed code is. A container rule's treeAs reads its lists as a file tree, as Starlight's <FileTree> reads one, into a JSON attribute of items { name, type, comment?, highlighted?, children? }: a name ending in / or holding a list is a directory, a bold name is highlighted, text after the name is its comment and … stands for more files. Run it after md.directive and before md.toHtml and mdx.compile, which compile the elements to component calls.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.directive())
  .use(md.mdx())
  .use(
    md.component({
      directives: [{ name: "note", component: "Callout", nameAs: "type", labelAs: "title" }],
    }),
  )
  .use(md.stringify())
  .processSync(":::note[Heads up]\nRead *this*.\n:::")
file.value
// <Callout type="note" title="Heads up">
//   Read *this*.
// </Callout>

DirectiveRule

How md.component turns matching directives into one component.

AlertRule

How md.component turns GitHub alerts, a block quote opening with [!TYPE], into a component.

UnknownDirectives

What md.component does with a directive no rule converts.

Takes "keep" | "source" | "error".

CodeRule

How md.component turns matching code blocks into a component, or groups them.

Names

One name or several.

Takes string | string[].

DirectiveKind

A directive's kind, by how many colons open it.

Takes "text" | "leaf" | "container".

AttributeRule

An attribute to keep: its name, or its name with what to call it and a default.

Takes string | { name: string; rename?: string | null; default?: string | null }.

GroupRule

The component wrapping a run of adjacent siblings one rule converted.

CodeGroupRule

The component wrapping a run of adjacent code blocks one rule matched; the meta keys it reads are taken out of each block's meta.

md.packageCommand

Turns a fenced block of package-manager commands into one MDX JSX element with the commands converted for each manager, as @docusaurus/remark-plugin-npm2yarn does, so a site's install tabs need no JavaScript plugin. The block's language names the ecosystem: npm converts as the npm-to-yarn package does, for pnpm, yarn, bun, deno and nub; pip for uv, poetry and pdm; cargo for cargo-binstall. Each manager becomes a string attribute named after it, in the order ecosystems lists them, and each line converts on its own; a line a manager has no equivalent for stays as written. Run it before md.toHtml and mdx.compile.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.mdx())
  .use(md.packageCommand())
  .use(md.stringify())
  .processSync("```npm\nnpm install textlane\n```")
file.value
// <PackageTabs npm="npm install textlane" pnpm="pnpm add textlane" yarn="yarn add textlane" bun="bun add textlane" />

Follows npm-to-yarn.

Ecosystems

The managers md.packageCommand converts each ecosystem's commands for.

NpmManager

A JavaScript package manager an npm command converts to.

Takes "npm" | "pnpm" | "yarn" | "bun" | "deno" | "nub".

PipManager

A Python package manager a pip command converts to.

Takes "pip" | "uv" | "poetry" | "pdm".

CargoManager

A Rust installer a cargo command converts to.

Takes "cargo" | "cargo-binstall".

md.headingId

Reads {#id} at the end of a heading, after a space, as its id, as remark-heading-id does; md.toHtml puts it on the heading. remark-heading-id's defaults is not ported: html.slug gives the other headings ids. With attributes: true it reads a whole attribute list instead, as md.directive reads one: ## API {#api .wide data-step=2} gives the heading an id, classes and a data-step. Only the last braces are read, event handlers (on…) and invalid names are dropped, and on untrusted input the result still belongs behind html.sanitize. markers turns literal heading suffixes into attributes and strips them, before or after an attribute list: {"[step]": {"data-step": true}, "[!toc]": {"data-toc-hidden": true}} reads ## Install [step] as <h2 data-step>Install</h2>.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.headingId())
  .use(md.toHtml())
  .use(html.stringify())
  .processSync("# Install {#setup}")
file.value
// <h1 id="setup">Install</h1>

Follows remark-heading-id.

MarkerValue

An attribute a heading marker sets: its value, or true for the bare attribute.

Takes boolean | string.

md.pathRewrite

Rewrites the URLs of images, links and definitions as a site serves them, from where the document lives: a relative URL is resolved against the file's path and made relative to root, every root-relative URL gets base once, and a link to a Markdown file becomes its page's URL, from pages or by markdownLinks (keep, directory or html). URLs with a scheme, protocol-relative ones and fragments stay as they are. Pass the document's path with the text.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.pathRewrite({ root: "/repo/docs", base: "/site", markdownLinks: "directory" }))
  .use(md.toHtml())
  .use(html.stringify())
  .processSync({
    value: "![logo](../logo.png) and [next](./next.md)",
    path: "/repo/docs/guide/intro.md",
  })
file.value
// <p><img src="/site/logo.png" alt="logo"> and <a href="/site/guide/next/">next</a></p>

UrlNode

A node with a URL.

Takes "image" | "link" | "definition".

MarkdownLinks

How a link to a Markdown file becomes a URL.

Takes "keep" | "directory" | "html".

md.shiftHeading

Moves every heading's depth by shift, kept within 1 to 6, as rehype-shift-heading does for hast: -1 makes each h2 an h1. dropTitle first drops the document's first node when it is an h1, looking past frontmatter and ESM, which suits a page whose title is rendered on its own; dropping before shifting keeps a document that opens on an h2.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.shiftHeading({ shift: -1, dropTitle: true }))
  .use(md.stringify())
  .processSync("# 0.2.0\n\n### Features\n\n- a")
file.value
// ## Features
//
// * a

Follows rehype-shift-heading.

md.strip

Strips mdast down to its text, as strip-markdown does: code, HTML, tables and definitions go, headings become paragraphs and formatting gives way to its content, which suits search indexes and plain-text summaries. keep leaves node types as they are and remove drops more.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.strip())
  .use(md.stringify())
  .processSync("# Hello *world*\n\nSee [the docs](/docs).")
file.value
// Hello world
//
// See the docs.

Follows strip-markdown.

md.toc

Generates a table of contents, as remark-toc does: under the first heading matching heading (Contents, Table of contents or TOC by default), it replaces whatever sat before the next heading as deep or shallower with a list linking to every heading after, by the ids github-slugger makes from their text, or the ids md.headingId stored. heading and skip are JavaScript regular expression sources matched against a heading's whole text, case-insensitively, run by Rust's regex: lookaround and back references are refused, and case folding is Unicode's rather than JavaScript's. parents takes unist-util-is tests written as JSON (a type, an object of fields, a list), not functions.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.toc())
  .use(md.stringify())
  .processSync("# Guide\n\n## Contents\n\n## Install\n\n### From npm\n\n## Use")
file.value
// # Guide
//
// ## Contents
//
// * [Install](#install)
//   * [From npm](#from-npm)
// * [Use](#use)
//
// ## Install
//
// ### From npm
//
// ## Use

Follows remark-toc.

ParentTest

A unist-util-is test of a node, written as JSON: one check, or a list any of which passes.

Takes ParentCheck | ParentCheck[].

ParentCheck

One unist-util-is check: a node type, or fields a node must equal.

Takes string | Record<string, unknown>.

md.stringify

Serializes mdast back into Markdown; its options pick the markers and spacing it writes.

import { textlane } from "textlane"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.stringify({ bullet: "-", emphasis: "_" }))
  .processSync("* *one*\n* two")
file.value
// - _one_
// - two

Follows remark-stringify.

UnsafePattern

A character to escape where it would otherwise start or end syntax.

Names

One name or several.

Takes string | string[].

md.toHtml

Turns mdast into hast, the HTML tree, so HTML plugins and html.stringify can follow.

import { textlane } from "textlane"
import * as html from "textlane/html"
import * as md from "textlane/md"

const file = textlane()
  .use(md.parse())
  .use(md.toHtml({ allowDangerousHtml: true }))
  .use(html.stringify({ allowDangerousHtml: true }))
  .processSync("Hi <kbd>Ctrl</kbd>")
file.value
// <p>Hi <kbd>Ctrl</kbd></p>

taskListLabels: { checked, unchecked } gives each GFM task-list checkbox an aria-label, so screen readers name it; remark-rehype writes none, so it is off by default.

breaks: true turns each line ending in text into a <br>, as remark-breaks does, so a single newline breaks the line as in GitHub comments.

Follows remark-rehype.

TaskListLabels

The labels of task-list checkboxes.

md.toNaturalLanguage

Turns mdast into nlcst, the natural-language tree, so nl.* plugins can check the prose of a Markdown document.

import { textlane } from "textlane"
import * as md from "textlane/md"
import * as nl from "textlane/nl"

const file = textlane()
  .use(md.parse())
  .use(md.toNaturalLanguage())
  .use(nl.repeatedWords())
  .use(nl.stringify())
  .processSync("It is *the the* best.")
file.messages[0].reason
// Unexpected repeated `the`, remove one occurrence

Follows remark-retext.