Prose
排版容器 · 富文本/markdown 后代选择器统一吃语义 token(纯皮肤·零依赖·RSC)
瑚琏排版容器 Prose
Prose 把渲染好的富文本(markdown→HTML、MDX 输出或手写 JSX)统一接管为一致的阅读排版, 标题、段落、列表、链接、行内代码 与引用全部吃语义 token, 明暗主题自动适配。
无序列表
- 零依赖、可在 RSC 中渲染(本体不加 use client)
- 强调用 加粗 与 斜体
- 所有颜色与圆角走 token,不写死
代码块
import { Prose } from "@hulianui/ui";
<Prose>{htmlContent}</Prose>;排版即沉默的设计——容器统一规则,内容只管语义。
底部段落,验证首尾子元素外边距收敛。
全状态
瑚琏排版容器 Prose
Prose 把渲染好的富文本(markdown→HTML、MDX 输出或手写 JSX)统一接管为一致的阅读排版, 标题、段落、列表、链接、行内代码 与引用全部吃语义 token, 明暗主题自动适配。
无序列表
- 零依赖、可在 RSC 中渲染(本体不加 use client)
- 强调用 加粗 与 斜体
- 所有颜色与圆角走 token,不写死
代码块
import { Prose } from "@hulianui/ui";
<Prose>{htmlContent}</Prose>;排版即沉默的设计——容器统一规则,内容只管语义。
底部段落,验证首尾子元素外边距收敛。
紧凑排版
size="sm" 把基准字号降到 text-sm,适合侧栏说明、卡片内长文等密集场景, 其余排版规则保持一致。
- 侧栏文档
- 卡片内富文本
Playground
瑚琏 Prose
统一接管富文本排版,吃语义 token,链接 与 code 一致呈现。
容器统一规则,内容只管语义。
<Prose>{/* 富文本 HTML/JSX */}</Prose>