转换工具

HTML / Markdown 预览

预览 Markdown 或 HTML，并查看渲染后的 HTML 输出。

转换

输入内容会自动保存在此设备上。

仅存储在你的浏览器中

发送到其他工具

输入模式

输入预览

Markdown Complete Sample

All supported Markdown syntax in one place.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Bold with asterisks and bold with underscores. Italic with asterisks and italic with underscores. Use inline code inside a sentence.

Cuvel link preview.

Syntax	Example	Supported
Bold	`text`	Yes
Italic	`text`	Yes
Link	`label`	Yes

Unordered item with "-"
Another item with "-"
Unordered item with "*"
Another item with "*"

Ordered item one
Ordered item two
Ordered item with another number

Blockquote line one.
Blockquote line two with bold and code.

<section class="card">
  <h2>Hello Markdown</h2>
  <p>Code fence sample</p>
</section>

渲染后 HTML

<h1>Markdown Complete Sample</h1>
<p>All supported Markdown syntax in one place.</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p><strong>Bold with asterisks</strong> and <strong>bold with underscores</strong>. <em>Italic with asterisks</em> and <em>italic with underscores</em>. Use <code>inline code</code> inside a sentence.</p>
<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">Cuvel</a> link preview.</p>
<table><thead><tr><th>Syntax</th><th>Example</th><th>Supported</th></tr></thead><tbody><tr><td>Bold</td><td><code><strong>text</strong></code></td><td>Yes</td></tr><tr><td>Italic</td><td><code><em>text</em></code></td><td>Yes</td></tr><tr><td>Link</td><td><code><a href="https://example.com" target="_blank" rel="noopener noreferrer">label</a></code></td><td>Yes</td></tr></tbody></table>
<ul><li>Unordered item with &quot;-&quot;</li><li>Another item with &quot;-&quot;</li><li>Unordered item with &quot;*&quot;</li><li>Another item with &quot;*&quot;</li></ul>
<ol><li>Ordered item one</li><li>Ordered item two</li><li>Ordered item with another number</li></ol>
<blockquote><p>Blockquote line one.</p><p>Blockquote line two with <strong>bold</strong> and <code>code</code>.</p></blockquote>
<pre><code>&lt;section class=&quot;card&quot;&gt;
  &lt;h2&gt;Hello Markdown&lt;/h2&gt;
  &lt;p&gt;Code fence sample&lt;/p&gt;
&lt;/section&gt;</code></pre>

Markdown 基础写法

标题：# 一级标题 / ## 二级标题
更多标题层级：### / #### / ##### / ######
强调：**粗体** / *斜体*
强调（另一种写法）：__粗体__ / _斜体_
无序列表：- 项目或 * 项目
有序列表：1. 项目
引用：> 引用内容
行内代码：`const name = "cuvel"`
代码块：用 ``` 和 ``` 包裹
链接：[站点名](https://example.com)
表格：| 列1 | 列2 | 下一行写 | --- | --- |

可直接粘贴的示例

# Markdown 示例

## 标题

这是一段普通文本，包含 **粗体** 和 *斜体*。

- 列表 A
- 列表 B

1. 有序 A
2. 有序 B

> 这是一段引用。

`inline code`

```html
<div class="note">Hello</div>
```

[Cuvel](https://example.com)

本页说明

在 Markdown 模式下，输入会立即反映到右侧预览。
在 HTML 模式下可直接输入原始 HTML，但 script 等不安全内容会被自动移除。
下方“渲染后 HTML”可复制到其他工具或文档中。
当前主要支持标题、强调、列表、引用、链接、代码和表格。删除线等部分语法暂不支持。

粘贴 Markdown/HTML 后可直接预览并查看生成 HTML，适合草稿和标记检查。

FAQ

如何在线预览 Markdown？

切换到 Markdown 模式并粘贴内容，即可立即看到渲染结果。

预览原始 HTML 是否安全？

相对安全。工具会先对 HTML 进行清理后再预览。

HTML/Markdown 预览工具适用于什么场景？

适用于文档草稿、快速校验标记、内容 QA 以及展示效果确认。