Markdown 转富文本工具

富文本设置

主题

字体大小

字体类型

编辑 Markdown

# Markdown 富文本转换示例

## 基本格式

这是**粗体**，这是*斜体*，这是~~删除线~~。

## 列表

无序列表：

* 项目 1
* 项目 2
  * 嵌套项目 A
  * 嵌套项目 B

有序列表：

1. 第一项
2. 第二项
3. 第三项

## 代码

```javascript
// 这是一段代码
function greet() {
  console.log("你好，世界！");
}
```

## 表格

| 姓名 | 年龄 | 性别 |
|------|-----|------|
| 张三 | 25  | 男   |
| 李四 | 28  | 女   |

## 引用

> 这是一段引用文本。
> 引用可以有多行。

## 链接和图片

[这是一个链接](https://example.com)

![图片示例](https://via.placeholder.com/150)

使用说明

在左侧编辑 Markdown 文本
右侧上方展示转换后的HTML代码（带内联样式）
右侧下方展示实际渲染效果
使用富文本设置自定义外观
点击"复制富文本内容"按钮复制带样式的富文本
点击"复制HTML代码"按钮复制带内联样式的HTML代码
可粘贴到Word、邮件等支持富文本的编辑器中

带样式的HTML代码

<div style="background-color: white; color: #333; font-size: 1rem; line-height: 1.6; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif"><h1 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 2em; padding-bottom: 0.3em; border-bottom-color: #eaecef">Markdown 富文本转换示例</h1>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">基本格式</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
这是<strong style="font-weight: 600;">粗体</strong>，这是<em style="font-style: italic;">斜体</em>，这是<del style="text-decoration: line-through;">删除线</del>。</p>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">列表</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
无序列表：</p>
<p style="margin-top: 0; margin-bottom: 16px;">
<ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">项目 1</li></ul><ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">项目 2</li></ul>
<p style="margin-top: 0; margin-bottom: 16px;">  * 嵌套项目 A</p>
<p style="margin-top: 0; margin-bottom: 16px;">  * 嵌套项目 B</p>
<p style="margin-top: 0; margin-bottom: 16px;">
有序列表：</p>
<p style="margin-top: 0; margin-bottom: 16px;">
<ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">第一项</li></ul><ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">第二项</li></ul><ul style="padding-left: 2em; margin-top: 0; margin-bottom: 16px;"><li style="margin-top: 0.25em;">第三项</li></ul>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">代码</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
``<code style="padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba(27, 31, 35, 0.05) border-radius: 3px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;">javascript</p>
<p style="margin-top: 0; margin-bottom: 16px;">// 这是一段代码</p>
<p style="margin-top: 0; margin-bottom: 16px;">function greet() {</p>
<p style="margin-top: 0; margin-bottom: 16px;">  console.log("你好，世界！");</p>
<p style="margin-top: 0; margin-bottom: 16px;">}</p>
</code>``
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">表格</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
<table style="width: 100%; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-bottom: 16px; border: 1px solid border-color: #dfe2e5;"><tr style="background-color: #fff;"><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">姓名</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">年龄</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">性别</td></tr><tr style="background-color: #f6f8fa;"><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">张三</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">25</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">男</td></tr><tr style="background-color: #fff;"><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">李四</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">28</td><td style="padding: 6px 13px; border: 1px solid;border-color: #dfe2e5;">女</td></tr></table>
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">引用</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
<blockquote style="padding: 0 1em; color: #6a737d; border-left-color: #dfe2e5 border-left: 0.25em solid; margin: 0 0 16px 0;">这是一段引用文本。</blockquote>
<blockquote style="padding: 0 1em; color: #6a737d; border-left-color: #dfe2e5 border-left: 0.25em solid; margin: 0 0 16px 0;">引用可以有多行。</blockquote>
<p style="margin-top: 0; margin-bottom: 16px;">
<h2 style="margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25; font-size: 1.5em; padding-bottom: 0.3em; border-bottom-color: #eaecef">链接和图片</h2>
<p style="margin-top: 0; margin-bottom: 16px;">
<a href="https://example.com" style="color: #0366d6 text-decoration: none;">这是一个链接</a></p>
<p style="margin-top: 0; margin-bottom: 16px;">
!<a href="https://via.placeholder.com/150" style="color: #0366d6 text-decoration: none;">图片示例</a></p>
</div>

此处显示转换后的HTML代码（带内联样式），点击上方按钮复制

富文本预览

Markdown 富文本转换示例

基本格式

这是粗体，这是斜体，这是~~删除线~~。

列表

无序列表：

项目 1

项目 2

* 嵌套项目 A

* 嵌套项目 B

有序列表：

第一项

第二项

第三项

代码

``javascript


// 这是一段代码
function greet() {
  console.log("你好，世界！");
}

表格

姓名	年龄	性别
张三	25	男
李四	28	女

引用

这是一段引用文本。

引用可以有多行。

链接和图片

这是一个链接

!图片示例

上方是富文本渲染效果，点击"复制富文本内容"可将此内容以富文本格式复制到剪贴板