Use the Markdown package
Install
pnpm add @docfuse/markdown react react-domnpm install @docfuse/markdown react react-domyarn add @docfuse/markdown react react-domReact 18.2, 18.3, and 19 are supported. Node.js 22 or newer is required.
Capabilities and loading boundaries
| Headings, links, lists, tasks, tables, footnotes, and definition lists | Built in | Write Markdown / GFM directly |
| Callouts, Tabs, Code Groups, Steps, and Terminal | Built in | Use the corresponding directive or fence |
| File Tree, Card Grid, API, Aside, Badge, Gallery, and copy snippets | Built in | Use the matching Markdown directive; the compiler creates structure and interaction attributes |
| Images, video, audio, and iframes | Built in | Use Markdown images and the built-in media directives |
| PDF, Word, PowerPoint, and Excel file blocks | Built in | Put a supported document link on its own line |
| Math, Mermaid, PlantUML, Kroki, link cards, and reading time | Official plugins | Import factories from @docfuse/plugins and add them to options.plugins |
Built-in highlighting covers Bash, C/C++/C#, CSS/SCSS, Diff, Dockerfile, dotenv, Go, GraphQL, HTML, Java, JavaScript/JSX, JSON/JSONC, Markdown/MDX, Nginx, PHP, Python, Ruby, Rust, SQL, TypeScript/TSX, Vue, and YAML. Register other languages through code.languages; unknownLanguage chooses warning, failure, or plain-text fallback.
The core emits only behaviors required by the current document. Diagram clients and styles are linked per page. If any page in a site build uses math, the math styles are included in the site stylesheet, while the KaTeX transform still runs only for pages that contain math syntax.
Content syntax
Ordinary Markdown does not need Docfuse's internal class names or data attributes. The Markdown syntax reference covers standard Markdown, GFM, tabs, steps, file trees, media, and every built-in directive. Use the Playground to compare source with rendered output.
MDX can still use the matching React components when project-local content needs dynamic props.
React
import { Markdown } from '@docfuse/markdown'import '@docfuse/markdown/base.css'import '@docfuse/markdown/theme.css'export function Article({ source }: { source: string }) { return <Markdown source={source} fallback={<p>Rendering…</p>} />}Use options to configure HTML, code themes, and content features:
<Markdown source={source} options={{ html: 'sanitize', code: { themes: { light: 'github-light', dark: 'github-dark' }, fallbackLanguage: 'text' }, features: { tables: false, terminals: false } }}/>html accepts trusted, sanitize, or strip. MDX executes JSX and should only render trusted content.
Math
import { math } from '@docfuse/plugins'import '@docfuse/plugins/math.css'<Markdown source={source} options={{ plugins: [math()] }} />Install @docfuse/plugins first. See Official plugins for other capabilities.
Customize output
<Markdown source={source} classNames={{ root: 'article', heading: 'article-heading' }} components={{ a: AppLink, Callout: BrandCallout }} slots={{ CopyIcon, DownloadIcon }} urlTransform={(value) => value.startsWith('/') ? `/docs${value}` : value}/>classNames adds styles, components replaces elements or composites, slots replaces focused visuals, and urlTransform rewrites link and media URLs. Interactive React replacements receive events, ARIA, and behavior attributes from Docfuse; forward those props instead of recreating them in Markdown.
SSR
import { createMarkdownRenderer } from '@docfuse/markdown/server'const renderer = createMarkdownRenderer()const { content, assets } = await renderer.render(source, { markdown: { html: 'trusted' }})content is ready for React SSR. assets describes the client resources required by the page.
Enhance static HTML
import { enhanceMarkdown } from '@docfuse/markdown/client'const enhancement = enhanceMarkdown(document, assets)await enhancement.ready// Before unmounting the pageenhancement.dispose()See the Markdown syntax reference for authoring, the Playground for rendered examples, and the React API for exact props and types.