Full GFM markdown with math, Shiki code, Mermaid diagrams, GitHub callouts and lazy zoomable images.

The full content renderer. Give it a markdown string and it renders GitHub-flavored markdown (tables, task lists, strikethrough), KaTeX math (inline $…$ and block $$…$$), Shiki-highlighted fenced code blocks, ```mermaid diagrams, GitHub-style > [!NOTE] callouts, heading anchors, and lazy, zoomable images — all in one component. Rewrite image/link URLs with urlTransform, and pass onCodeEdit to surface an "Edit" button on code blocks.

Import

tsx

1import { MarkdownRenderer } from "@yuhuanowo/yunui/content";

Requires @yuhuanowo/yunui/content.css and katex/dist/katex.min.css to be imported by the host app, plus the content peer dependencies (see Content overview).

Example

The demo below feeds a single markdown string exercising headings, a table, a task list, a fenced code block, a Mermaid diagram, math, and a callout.

MarkdownRenderer

Markdown renderer

Full GFM with emphasis, ~~strikethrough~~, links and inline code.

Note

Callouts use GitHub's > [!TYPE] blockquote syntax — note, tip, important, warning, caution.

Table

Feature	Supported	Notes
Tables	✅	GitHub-flavored
Task list	✅	Interactive checkboxes
Math	✅	KaTeX inline & block

Task list

Render headings, tables and lists
Highlight code with Shiki
Ship to production

Code

TypeScript

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

Math

The Gaussian integral is

\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

, and in block form:

E = mc^2

Diagram

Rendering diagram…

Usage

tsx

1<MarkdownRenderer
2  content={message.content}
3  urlTransform={(url) => (url.startsWith("/") ? `${API_HOST}${url}` : url)}
4  onCodeEdit={({ code, language, filename }) => openInEditor({ code, language, filename })}
5/>

Props

Prop	Type	Default	Description
className	string	—
content*	string	—
onCodeEdit	((payload: CodeBlockEditPayload) => void)	—	When provided, code blocks show an "Edit" button that calls this with the code payload (e.g. open it in an editor). Hidden if unset.
renderLink	((link: { href?: string; children: ReactNode; isExternal: boolean; }) => ReactNode)	—	Intercept a rendered Markdown link. Return a node to replace the default link, or `undefined` to retain YunUI's normal internal/external link UI. Useful for typed inline citations encoded as fragment links.
urlTransform	((url: string) => string)	—	Rewrite image/link URLs before rendering (e.g. prefix a backend host or proxy). Defaults to identity.

Markdown Renderer