Prose

简介

Prose 组件用于包裹内容并应用良好的排版样式。它使用自定义的 prose 样式系统，为包裹在内的内容（如标题、段落、列表、代码块、表格等）自动应用专业的排版样式。

案例

主要标题

这是一个段落，展示了 Prose 组件如何美化文本内容。Prose 组件会自动为包裹在内的 HTML 元素应用专业的排版样式。

二级标题

这是另一个段落，包含粗体文本和斜体文本，以及一个链接。

三级标题

无序列表项一
无序列表项二
无序列表项三

四级标题

有序列表项一
有序列表项二
有序列表项三

主要标题

这是一个段落，展示了 Prose 组件如何美化文本内容。Prose 组件会自动为包裹在内的 HTML 元素应用专业的排版样式。

二级标题

这是另一个段落，包含粗体文本和斜体文本，以及一个链接。

三级标题

无序列表项一
无序列表项二
无序列表项三

四级标题

有序列表项一
有序列表项二
有序列表项三

---
/**
 * @component ProseBasic
 * @description Prose 组件基础用法示例
 */
import { Prose } from "@coffic/cosy-ui";
---

<Prose>
	<h1>主要标题</h1>
	<p>这是一个段落，展示了 Prose 组件如何美化文本内容。Prose 组件会自动为包裹在内的 HTML 元素应用专业的排版样式。</p>

	<h2>二级标题</h2>
	<p>这是另一个段落，包含<strong>粗体文本</strong>和<em>斜体文本</em>，以及一个<a href="#">链接</a>。</p>

	<h3>三级标题</h3>
	<ul>
		<li>无序列表项一</li>
		<li>无序列表项二</li>
		<li>无序列表项三</li>
	</ul>

	<h4>四级标题</h4>
	<ol>
		<li>有序列表项一</li>
		<li>有序列表项二</li>
		<li>有序列表项三</li>
	</ol>
</Prose>

<script setup lang="ts">
import { Prose } from "@coffic/cosy-ui/vue";
</script>

<template>
	<Prose>
		<h1>主要标题</h1>
		<p>这是一个段落，展示了 Prose 组件如何美化文本内容。Prose 组件会自动为包裹在内的 HTML 元素应用专业的排版样式。</p>

		<h2>二级标题</h2>
		<p>这是另一个段落，包含<strong>粗体文本</strong>和<em>斜体文本</em>，以及一个<a href="#">链接</a>。</p>

		<h3>三级标题</h3>
		<ul>
			<li>无序列表项一</li>
			<li>无序列表项二</li>
			<li>无序列表项三</li>
		</ul>

		<h4>四级标题</h4>
		<ol>
			<li>有序列表项一</li>
			<li>有序列表项二</li>
			<li>有序列表项三</li>
		</ol>
	</Prose>
</template>

Props

class

自定义 CSS 类名，用于覆盖默认样式或添加新的样式。

自定义样式示例

通过 class 属性，你可以为 Prose 组件添加自定义类名，覆盖默认样式或添加新的样式。

这个示例添加了背景色、内边距和圆角。

自定义样式示例

通过 class 属性，你可以为 Prose 组件添加自定义类名，覆盖默认样式或添加新的样式。

这个示例添加了背景色、内边距和圆角。

---
/**
 * @component ProseClass
 * @description Prose 组件自定义类名示例
 */
import { Prose } from "@coffic/cosy-ui";
---

<Prose class="cosy:max-w-none cosy:bg-base-200 cosy:p-6 cosy:rounded-lg">
	<h2>自定义样式示例</h2>
	<p>通过 <code>class</code> 属性，你可以为 Prose 组件添加自定义类名，覆盖默认样式或添加新的样式。</p>
	<p>这个示例添加了背景色、内边距和圆角。</p>
</Prose>

<script setup lang="ts">
import { Prose } from "@coffic/cosy-ui/vue";
</script>

<template>
	<Prose class="cosy:max-w-none cosy:bg-base-200 cosy:p-6 cosy:rounded-lg">
		<h2>自定义样式示例</h2>
		<p>通过 <code>class</code> 属性，你可以为 Prose 组件添加自定义类名，覆盖默认样式或添加新的样式。</p>
		<p>这个示例添加了背景色、内边距和圆角。</p>
	</Prose>
</template>

style

自定义内联样式。

完整排版示例

这是一个引导段落，通常用于文章开头的摘要内容。

文本样式

这段文字包含粗体、斜体、行内代码和链接。

这是一段引用内容，用于强调重要信息或引用他人的话。

代码块

function example() {
  console.log("这是一个代码块示例");
  return true;
}

表格

姓名	职位	部门
张三	前端开发	技术部
李四	产品经理	产品部

列表

无序列表项一
无序列表项二
- 嵌套项一
- 嵌套项二
无序列表项三

这是一段分隔线后的内容。

完整排版示例

这是一个引导段落，通常用于文章开头的摘要内容。

文本样式

这段文字包含粗体、斜体、行内代码和链接。

这是一段引用内容，用于强调重要信息或引用他人的话。

代码块

{`function example() {
  console.log("这是一个代码块示例");
  return true;
}`}

表格

姓名	职位	部门
张三	前端开发	技术部
李四	产品经理	产品部

列表

无序列表项一
无序列表项二
- 嵌套项一
- 嵌套项二
无序列表项三

这是一段分隔线后的内容。

---
/**
 * @component ProseCustomStyle
 * @description Prose 组件自定义样式示例，展示各种 HTML 元素
 */
import { Prose } from "@coffic/cosy-ui";
---

<Prose class="cosy:max-w-none">
	<h1>完整排版示例</h1>
	<p class="lead">这是一个引导段落，通常用于文章开头的摘要内容。</p>

	<h2>文本样式</h2>
	<p>这段文字包含<strong>粗体</strong>、<em>斜体</em>、<code>行内代码</code>和<a href="#">链接</a>。</p>

	<blockquote>
		<p>这是一段引用内容，用于强调重要信息或引用他人的话。</p>
	</blockquote>

	<h3>代码块</h3>
	<pre><code>{`function example() {
  console.log("这是一个代码块示例");
  return true;
}`}</code></pre>

	<h3>表格</h3>
	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>职位</th>
				<th>部门</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>前端开发</td>
				<td>技术部</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>产品经理</td>
				<td>产品部</td>
			</tr>
		</tbody>
	</table>

	<h3>列表</h3>
	<ul>
		<li>无序列表项一</li>
		<li>无序列表项二
			<ul>
				<li>嵌套项一</li>
				<li>嵌套项二</li>
			</ul>
		</li>
		<li>无序列表项三</li>
	</ul>

	<hr />

	<p>这是一段分隔线后的内容。</p>
</Prose>

<script setup lang="ts">
import { Prose } from "@coffic/cosy-ui/vue";
</script>

<template>
	<Prose class="cosy:max-w-none">
		<h1>完整排版示例</h1>
		<p class="lead">这是一个引导段落，通常用于文章开头的摘要内容。</p>

		<h2>文本样式</h2>
		<p>这段文字包含<strong>粗体</strong>、<em>斜体</em>、<code>行内代码</code>和<a href="#">链接</a>。</p>

		<blockquote>
			<p>这是一段引用内容，用于强调重要信息或引用他人的话。</p>
		</blockquote>

		<h3>代码块</h3>
		<pre><code>{`function example() {
  console.log("这是一个代码块示例");
  return true;
}`}</code></pre>

		<h3>表格</h3>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>职位</th>
					<th>部门</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>前端开发</td>
					<td>技术部</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>产品经理</td>
					<td>产品部</td>
				</tr>
			</tbody>
		</table>

		<h3>列表</h3>
		<ul>
			<li>无序列表项一</li>
			<li>无序列表项二
				<ul>
					<li>嵌套项一</li>
					<li>嵌套项二</li>
				</ul>
			</li>
			<li>无序列表项三</li>
		</ul>

		<hr />

		<p>这是一段分隔线后的内容。</p>
	</Prose>
</template>

支持的 HTML 元素

Prose 组件会自动为以下 HTML 元素应用专业的排版样式：

标题: h1, h2, h3, h4, h5, h6
文本: p, a, strong, em, del, ins, sup, sub, mark, small
列表: ul, ol, li（支持多层嵌套）
代码: code, pre, kbd, samp
引用: blockquote
分隔: hr
表格: table, thead, tbody, tfoot, th, td
媒体: img, video, figure, figcaption

完整排版示例

这是一个引导段落，通常用于文章开头的摘要内容。

文本样式

这段文字包含粗体、斜体、行内代码和链接。

这是一段引用内容，用于强调重要信息或引用他人的话。

代码块

function example() {
  console.log("这是一个代码块示例");
  return true;
}

表格

姓名	职位	部门
张三	前端开发	技术部
李四	产品经理	产品部

列表

无序列表项一
无序列表项二
- 嵌套项一
- 嵌套项二
无序列表项三

这是一段分隔线后的内容。

完整排版示例

这是一个引导段落，通常用于文章开头的摘要内容。

文本样式

这段文字包含粗体、斜体、行内代码和链接。

这是一段引用内容，用于强调重要信息或引用他人的话。

代码块

{`function example() {
  console.log("这是一个代码块示例");
  return true;
}`}

表格

姓名	职位	部门
张三	前端开发	技术部
李四	产品经理	产品部

列表

无序列表项一
无序列表项二
- 嵌套项一
- 嵌套项二
无序列表项三

这是一段分隔线后的内容。

---
/**
 * @component ProseCustomStyle
 * @description Prose 组件自定义样式示例，展示各种 HTML 元素
 */
import { Prose } from "@coffic/cosy-ui";
---

<Prose class="cosy:max-w-none">
	<h1>完整排版示例</h1>
	<p class="lead">这是一个引导段落，通常用于文章开头的摘要内容。</p>

	<h2>文本样式</h2>
	<p>这段文字包含<strong>粗体</strong>、<em>斜体</em>、<code>行内代码</code>和<a href="#">链接</a>。</p>

	<blockquote>
		<p>这是一段引用内容，用于强调重要信息或引用他人的话。</p>
	</blockquote>

	<h3>代码块</h3>
	<pre><code>{`function example() {
  console.log("这是一个代码块示例");
  return true;
}`}</code></pre>

	<h3>表格</h3>
	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>职位</th>
				<th>部门</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>前端开发</td>
				<td>技术部</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>产品经理</td>
				<td>产品部</td>
			</tr>
		</tbody>
	</table>

	<h3>列表</h3>
	<ul>
		<li>无序列表项一</li>
		<li>无序列表项二
			<ul>
				<li>嵌套项一</li>
				<li>嵌套项二</li>
			</ul>
		</li>
		<li>无序列表项三</li>
	</ul>

	<hr />

	<p>这是一段分隔线后的内容。</p>
</Prose>

<script setup lang="ts">
import { Prose } from "@coffic/cosy-ui/vue";
</script>

<template>
	<Prose class="cosy:max-w-none">
		<h1>完整排版示例</h1>
		<p class="lead">这是一个引导段落，通常用于文章开头的摘要内容。</p>

		<h2>文本样式</h2>
		<p>这段文字包含<strong>粗体</strong>、<em>斜体</em>、<code>行内代码</code>和<a href="#">链接</a>。</p>

		<blockquote>
			<p>这是一段引用内容，用于强调重要信息或引用他人的话。</p>
		</blockquote>

		<h3>代码块</h3>
		<pre><code>{`function example() {
  console.log("这是一个代码块示例");
  return true;
}`}</code></pre>

		<h3>表格</h3>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>职位</th>
					<th>部门</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>前端开发</td>
					<td>技术部</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>产品经理</td>
					<td>产品部</td>
				</tr>
			</tbody>
		</table>

		<h3>列表</h3>
		<ul>
			<li>无序列表项一</li>
			<li>无序列表项二
				<ul>
					<li>嵌套项一</li>
					<li>嵌套项二</li>
				</ul>
			</li>
			<li>无序列表项三</li>
		</ul>

		<hr />

		<p>这是一段分隔线后的内容。</p>
	</Prose>
</template>

Slots

default

需要应用排版样式的内容。可以包含任何 HTML 元素，Prose 组件会自动为这些元素应用合适的排版样式。