Prose

Introduction

The Prose component is used to wrap content and apply beautiful typography styles. It uses a custom prose style system that automatically applies professional typography styles to content wrapped within it (such as headings, paragraphs, lists, code blocks, tables, etc.).

Examples

主要标题

这是一个段落，展示了 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

Custom CSS class name for overriding default styles or adding new styles.

自定义样式示例

通过 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

Custom inline styles.

完整排版示例

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

文本样式

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

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

代码块

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>

Supported HTML Elements

The Prose component automatically applies professional typography styles to the following HTML elements:

Headings: h1, h2, h3, h4, h5, h6
Text: p, a, strong, em, del, ins, sup, sub, mark, small
Lists: ul, ol, li (supports multi-level nesting)
Code: code, pre, kbd, samp
Quotes: blockquote
Separators: hr
Tables: table, thead, tbody, tfoot, th, td
Media: 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

Content that needs typography styles applied. Can contain any HTML elements, and the Prose component will automatically apply appropriate typography styles to these elements.