Prose
prose给富文本或 Markdown 内容套上统一的排版样式
用法
基础排版
把渲染好的富文本（HTML/JSX/MDX 输出）塞进 Prose，标题/段落/列表/链接/行内代码统一吃语义 token。
瑚琏排版容器 Prose
Prose 把渲染好的富文本（markdown→HTML、MDX 输出或手写 JSX）统一接管为一致的阅读排版， 标题、段落、列表、链接、行内代码 与引用全部吃语义 token， 明暗主题自动适配。
无序列表
- 零依赖、可在 RSC 中渲染（本体不加 use client）
- 强调用 加粗 与 斜体
- 所有颜色与圆角走 token，不写死
代码块
import { Prose } from "@hulianui/ui";
<Prose>{htmlContent}</Prose>;排版即沉默的设计——容器统一规则，内容只管语义。
底部段落，验证首尾子元素外边距收敛。
<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，适合侧栏说明、卡片内长文。
紧凑排版
适合侧栏说明、卡片内长文等密集场景，其余排版规则保持一致。
- 侧栏文档
- 卡片内富文本
<Prose size="sm">
<h2>紧凑排版</h2>
<p>适合侧栏说明、卡片内长文等密集场景，其余排版规则保持一致。</p>
<ul>
<li>侧栏文档</li>
<li>卡片内富文本</li>
</ul>
</Prose>折叠块（含嵌套）
GFM 的 details / summary 与代码块同一视觉家族；嵌套折叠块落弱背景与外层区分。
折叠块 details / summary
markdown 产物里的 GFM 折叠块直接吃 Prose 的排版，与代码块同一个视觉家族。
展开看答案
列表推导式会一次性把结果全部算出来放进内存；生成器表达式只在迭代时逐个产出， 处理大文件时后者不会把整份数据读进来。
展开看报错怎么读（嵌套一层）
嵌套的折叠块落弱背景，与外层拉开一档，明暗主题下都能看出层级。
展开看完整代码（默认收起）
with open("data.txt") as f:
total = sum(int(line) for line in f)<Prose>
<details open>
<summary>展开看答案</summary>
<p>生成器表达式只在迭代时逐个产出，不会把整份数据读进内存。</p>
<details>
<summary>展开看报错怎么读（嵌套一层）</summary>
<p>嵌套的折叠块落弱背景，与外层拉开一档。</p>
</details>
</details>
</Prose>宽表横向滚动
scrollableTables 让列多的表格在自身内部横向滚动，不撑破版心；表头随之不换行（否则列会被压到一列一字，永远不滚）。代价是表格宽度改为按内容撑开。
| 时间戳 | 上游通道 | 模型名称 | 请求数 | 失败率 | 平均耗时 |
|---|---|---|---|---|---|
| 2026-08-11 | 华东主通道 | claude-opus-5 | 12,345 | 0.12% | 820ms |
| 2026-08-10 | 华北备用通道 | claude-sonnet-5 | 8,901 | 0.31% | 640ms |
<Prose scrollableTables>
<table>{/* 六列宽表：窄容器内自己横向滚动 */}</table>
</Prose>何时用
包裹一段渲染好的富文本（markdown→HTML、MDX 输出或手写 JSX），用后代选择器把标题/段落/列表/链接/行内代码/引用统一接管为一致阅读排版、自动适配明暗主题。内容已是 Markdown 源字符串时用 Markdown（它内部就套 Prose）；单段/单个标题等原子文本用 Text / Heading，不要为一句话套 Prose。
导入
import { Prose } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| as | ElementType | "article" | 渲染的容器标签 |
| size | "sm" | "base" | "base" | 整体排版尺寸基准；sm 把基准字号降到 text-sm，适合侧栏/卡片内长文 |
| scrollableTables | boolean | false | 宽表兜底：把 table 自身变成横向滚动容器，列多时不撑破版心（表头随之不换行）。代价是表格宽度改为按内容撑开、不再恒占满版心 |
继承 HTMLAttributes<HTMLElement>（className / style 等）。
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 富文本内容（HTML/JSX） |
禁忌 / 坑
scrollableTables会把table改成display: block并给表头加whitespace-nowrap。表头不换行不是修饰而是滚动成立的前提：只加overflow-x-auto的话浏览器会把每列压到 min-content（中文一列一字、行高翻几倍），内容永远不超出滚动容器，于是根本不滚——看上去像是字号或断点没调好。正文单元格保持换行：一条不换行的长描述会把表拖宽到别的列滚不到。scrollableTables开启后表格宽度按内容撑开、不再恒占满版心（窄表会缩到内容宽）。只有在真的会溢出的宽表上开。scrollableTables存在的理由只对 HTML 字符串形态成立：内容经dangerouslySetInnerHTML塞进来时，Prose 拿不到表格节点、包不了滚动容器，只能在table自身上开一档。如果内容是 children（JSX 子节点），更推荐自己把那张宽表包进一层overflow-x-auto容器——可以只作用于确实会溢出的那一张表，也不必牺牲其余表格的满宽。- 见 [[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 一致呈现。
展开看答案
折叠块与代码块同一视觉家族，summary 不可选中。
容器统一规则，内容只管语义。
<Prose>{/* 富文本 HTML/JSX */}</Prose>