Syntax
Dialects, feature switches and the verbatim fallback
Two props decide what the editor understands:
components: the component specssyntax: switches for Markdown dialects
JSX without a spec keeps its children editable, with its tags edited as text. Anything else is kept verbatim: it round-trips byte-for-byte and is edited as source. Turning a feature off never breaks a document.
import {
MdxEditor,
admonitionSpec,
filesFenceSpecs,
fumadocsUiComponents,
} from "@fumadocs-editor/ui";
const components = [...fumadocsUiComponents, admonitionSpec, ...filesFenceSpecs];
export function DialectEditor({ text }: { text: string }) {
return <MdxEditor defaultValue={text} components={components} syntax={{ math: true }} />;
}
Options
| Option | Default | Turns on |
|---|---|---|
headingSuffixes | true | [#id] and [!toc] on headings |
math | false | $…$ and $$…$$ TeX math |
directives | true with admonitionSpec | ::: admonitions |
Dialects are off by default because they change how existing text parses:
with math on, $5 and $10 becomes a formula.
Dialects
## Title [#custom-id], [!toc] and [toc] show as chips on the heading
instead of text. Change them from the block menu.
$x^2$ and $$…$$ are edited as TeX with a live KaTeX preview. KaTeX only
loads when the first formula appears.
Register admonitionSpec to edit :::warn[Title] blocks like a Callout.
They stay ::: in the file, and <Callout> stays JSX.
Register filesFenceSpecs to edit ```files fences with the same UI as
<Files>.
A mermaid code block renders its diagram below the source, drawn by
Pele. Nothing to turn on.
Consecutive fences with a tab="…" meta are one tab group, as in
fumadocs. The editor
draws them as one box with an editable label per tab: ⌘Enter in a tab adds
the next one, and a code block's ⚙ menu has Add tab and the raw meta
string.
Not yet editable
Explicit <CodeBlockTabs>, non-fumadocs <Tabs> and footnotes are kept
verbatim for now.
Last updated on