转换工具

HTML/Markdown 预览 - 渲染结果

Q: 什么时候适合使用 HTML/Markdown 预览 - 渲染结果？

适合在浏览器内快速完成 转换 检查，又不想切换到其他工具时使用。

Q: 它更适合什么工作？

适合日常的 转换 检查、转换、整理和验证。

Q: 为什么不用通用编辑器？

因为它减少准备成本，并直接提供聚焦的 转换 工作流。

预览 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
&lt;div class="note"&gt;Hello&lt;/div&gt;
```

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

本页说明

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

使用场景

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

适合需要在浏览器内快速完成转换相关检查，而不想切换到其他工具时使用。

使用说明

基本流程

1. 先设置 HTML/Markdown 预览 - 渲染结果所需的输入内容或选项。
2. 检查结果，并根据需要继续调整。
3. 复制、保存，或把结果带到下一步使用。

使用要点

- 网站会尽量优先采用浏览器内处理输入和输出的方式。
- HTML/Markdown 预览 - 渲染结果适合快速完成转换相关的检查、整理和转换。
- 在生产环境或共享数据中使用前，请务必再次确认最终结果。

适用场景

- 打开 HTML/Markdown 预览 - 渲染结果后立即开始处理
- 不想启动更重的应用，只想快速完成小型转换任务
- 在保存或分享之前先整理并确认内容

FAQ

如何在线预览 Markdown？

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

预览原始 HTML 是否安全？

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

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

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

什么时候适合使用 HTML/Markdown 预览 - 渲染结果？

适合在浏览器内快速完成转换检查，又不想切换到其他工具时使用。

它更适合什么工作？

适合日常的转换检查、转换、整理和验证。

为什么不用通用编辑器？

因为它减少准备成本，并直接提供聚焦的转换工作流。