Markdown Playground

Edit the source on the left and the rendered output updates on the right. Desktop panes use a draggable divider and synchronized scrolling; on narrow screens, use the upper-right icon to switch views. See Use the Markdown package for integration.

Headings and prose

Third-level heading

Fourth-level heading

Fifth-level heading

Sixth-level heading

Inline semantics

Body text supports strong, emphasis, deletion, highlight, inline code, Ctrl + K, H₂O, E=mc², API, citations, short quotes, secondary detail, variables, output, and August 12, 2026.

Statuses use Default, Beta, Released, Review, and Risk.

A normal link and an autolink https://docfuse.dev keep the same visual and keyboard contract.

Lists, tasks, and definitions

• An unordered item.
  • A nested item preserves structure.
• Another item.

1. A first ordered step.
2. A second ordered step.

• Semantic HTML is generated.
• Interaction loads on demand.
• A host may apply brand tokens.

Default behavior

The compiler generates semantic HTML with keyboard handling, focus states, and ARIA.

Customizable behavior

Colors, typography, spacing, radii, labels, and component replacements.

Quotes and callouts

A documentation UI should clarify content without competing with it.

Code and terminal

Copy a short command directly: pnpm add @docfuse/markdown.

export default {  title: 'Docfuse',  search: { enabled: true }}

Highlight selected lines

Fence metadata can combine a filename with one or more highlighted lines:

export default {  title: 'Docfuse',  i18n: { defaultLocale: 'en', locales: ['en'] },  search: { enabled: true },  theme: { darkMode: true }}

Annotate line states

Line markers demonstrate highlight, diff, focus, word, error, and warning states without changing the block anatomy:

const oldName = 'docs'const newName = 'docfuse'const searchable = trueconst result = buildSite(config)const output = resolveOutput(config)throw new Error('Invalid config')console.warn('Missing description')

Multiple languages

Built-in languages reuse the same file bar, line numbers, copy feedback, light/dark theme, and wrapping:

pnpm docs:buildpnpm docs:preview

{  "title": "Docfuse",  "search": { "enabled": true }}

Project files and source

The code-block title selects the filename and file icon; the fence language selects highlighting.

{ "scripts": { "docs:dev": "docfuse dev" } }

import { defineConfig } from 'docfuse'export default defineConfig({ title: 'Docfuse' })

# DocfuseBuild and publish the documentation site.

steps:  - run: pnpm docs:build

export function SearchPanel() {  return <button type="button">Search</button>}

import { Status } from './Status'<Status value="stable" />

<template><span>{{ status }}</span></template>

print('build complete')

fn main() { println!("build complete"); }

DOCFUSE_ORIGIN=https://docs.example.com

$accent: #0071e3;.docs { color: $accent; }

create table documents (id integer primary key, slug text not null);

FROM nginx:alpineCOPY .docfuse/dist /usr/share/nginx/html

location / { try_files $uri $uri/ =404; }

- const locale = 'zh'+ const locale = 'en'

Long lines wrap inside the code block instead of widening the content canvas:

const summary = 'Docfuse keeps Markdown, MDX, React components, search, localization, versioning, static output, and machine-readable artifacts in one build workflow.'

Code Group

pnpm add @docfuse/markdown

npm install @docfuse/markdown

yarn add @docfuse/markdown

Terminal

$ pnpm docs:build
✓ Built 42 pages in 1.8s

Failure output keeps the command, source location, and exit state together:

$ pnpm exec docfuse check
✗ docs/guide/setup.md: broken internal link /guide/install/
Command failed with exit code 1

Tables and data

Use the table header to test sorting and the toolbar to test CSV and preview behavior.

Extended content components

Tabs

Steps

1. Prepare content

   Write Markdown, complete frontmatter, and verify local asset paths.

2. Verify

   Run content checks and a clean production build.

3. Publish

   Upload the generated static directory.

Card Grid

Link Card

With linkCard() enabled, a standalone HTTP(S) link becomes a link card:

File Tree

API block and aside

Files, images, and trusted media

PDF, Word, PowerPoint, and Excel

Standalone links with supported document extensions become file blocks. The URLs below only demonstrate the file-block appearance; replace them with real file URLs in your site:

Images and captions

Gallery

Video, audio, and embeds

These directives generate native media elements and apply accessible labels, loading defaults, and iframe permission boundaries.

Put media files in docs/public/ and reference them with site-absolute paths.

Diagrams and math

Enable Mermaid, PlantUML, Kroki, and math through official plugins. Each diagram supports source copy, source/preview switching, inline zoom, and an expanded view.

flowchart LR
  A["Markdown source"] --> B["Static HTML"]
  B --> C["On-demand interaction"]

Zoom outReset zoomZoom in

Zoom outReset zoomZoom in

Zoom outReset zoomZoom in

Inline math $E = mc^2$ follows prose. Display math owns its overflow boundary:

Details and footnotes

Footnotes add a source or short explanation without interrupting the main flow.¹

Use Package usage for integration and the React API for exact contracts.