Prose
prose排版容器 · 富文本/markdown 后代选择器统一吃语义 token(纯皮肤·零依赖·RSC)
用法
基础排版
把渲染好的富文本（HTML/JSX/MDX 输出）塞进 Prose，标题/段落/列表/链接/行内代码统一吃语义 token。
瑚琏排版容器 Prose
Prose 把渲染好的富文本（markdown→HTML、MDX 输出或手写 JSX）统一接管为一致的阅读排版， 标题、段落、列表、链接、行内代码 与引用全部吃语义 token， 明暗主题自动适配。
无序列表
- 零依赖、可在 RSC 中渲染（本体不加 use client）
- 强调用 加粗 与 斜体
- 所有颜色与圆角走 token，不写死
代码块
import { Prose } from "@hulianui/ui";
<Prose>{htmlContent}</Prose>;排版即沉默的设计——容器统一规则，内容只管语义。
底部段落，验证首尾子元素外边距收敛。
tsx
<Prose>
<h1>瑚琏排版容器 Prose</h1>
<p>
标题、段落、列表、<a href="#">链接</a>、<code>行内代码</code> 与引用
全部吃语义 token，明暗主题自动适配。
</p>
<ul>
<li>零依赖、可在 RSC 中渲染</li>
<li>强调用 <strong>加粗</strong> 与 <em>斜体</em></li>
</ul>
<blockquote>排版即沉默的设计。</blockquote>
</Prose>紧凑尺寸
size="sm" 把基准字号降到 text-sm，适合侧栏说明、卡片内长文。
紧凑排版
适合侧栏说明、卡片内长文等密集场景，其余排版规则保持一致。
- 侧栏文档
- 卡片内富文本
tsx
<Prose size="sm">
<h2>紧凑排版</h2>
<p>适合侧栏说明、卡片内长文等密集场景，其余排版规则保持一致。</p>
<ul>
<li>侧栏文档</li>
<li>卡片内富文本</li>
</ul>
</Prose>何时用
包裹一段渲染好的富文本（markdown→HTML、MDX 输出或手写 JSX），用后代选择器把标题/段落/列表/链接/行内代码/引用统一接管为一致阅读排版、自动适配明暗主题。内容已是 Markdown 源字符串时用 Markdown（它内部就套 Prose）；单段/单个标题等原子文本用 Text / Heading，不要为一句话套 Prose。
导入
ts
import { Prose } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| as | ElementType | "article" | 渲染的容器标签 |
| size | "sm" | "base" | "base" | 整体排版尺寸基准；sm 把基准字号降到 text-sm，适合侧栏/卡片内长文 |
继承 HTMLAttributes<HTMLElement>（className / style 等）。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 富文本内容（HTML/JSX） |
禁忌 / 坑
- 见 [[chat-bubble-max-w-prose-overflows-narrow-column]]：
max-w-prose（65ch≈398px）是绝对值、不感知父容器可用宽度，放进移动端窄 flex 列会横向溢出/裁切。约束宽度用max-w-[min(65ch,100%)]，且父链 flex 项加min-w-0；不要叠max-w-prose max-w-full（同属性二选一由 CSS 顺序决定不可靠）。
相关
Text · Heading · Markdown · AuroraText · AnimatedShinyText · AnimatedGradientText
Playground
瑚琏 Prose
统一接管富文本排版，吃语义 token，链接 与 code 一致呈现。
容器统一规则，内容只管语义。
<Prose>{/* 富文本 HTML/JSX */}</Prose>