The content-rendering stack turns LLM / chat / documentation output into rich, safe UI: full GitHub-flavored markdown, KaTeX math, Shiki-highlighted code, Mermaid diagrams, GitHub-style callouts, and lazy, zoomable images. It lives on its own subpath, @yuhuanowo/yunui/content, so the heavy rendering engines (shiki, mermaid) never touch apps that don't need them.

Install

The content subpath declares its rendering libraries as optional peer dependencies — install them in your app alongside YunUI:

1pnpm add @yuhuanowo/yunui react-markdown remark-gfm remark-math \
2  rehype-raw rehype-katex rehype-slug katex shiki mermaid

Styles

Import the content stylesheet and the KaTeX stylesheet once, wherever you load global CSS:

1@import "@yuhuanowo/yunui/content.css";
2@import "katex/dist/katex.min.css";

Import

1import {
2  MarkdownRenderer,
3  CodeBlock,
4  InlineCode,
5  CalloutBlock,
6  MathRenderer,
7  InlineMath,
8  BlockMath,
9  MermaidDiagram,
10  ContentImage,
11  ImageLightbox,
12} from "@yuhuanowo/yunui/content";

Everything at once

MarkdownRenderer composes the whole stack. Feed it a markdown string with headings, a table, a task list, a fenced code block, a ```mermaid diagram, $math$, and a > [!NOTE] callout, and it renders each with the matching component.

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

The pieces

Each renderer is also exported standalone so you can drop a single capability into your own layout:

• Markdown Renderer — the full GFM pipeline.
• Code Block — Shiki highlighting with a filename header, line numbers and copy.
• Callout Block — GitHub-style note / tip / warning panels.
• Math Renderer — KaTeX, inline or block.
• Mermaid Diagram — on-demand diagrams.
• Content Image — lazy, fade-in, click-to-zoom images.
• Image Lightbox — the full-screen viewer behind them.