跳至正文

Markdown to HTML 转换器

实时将Markdown语法转换为HTML的工具。即时预览您的Markdown并生成HTML代码。

Markdown Input

Preview

HTML Output

主要功能

  • 实时Markdown预览
  • 自动生成HTML代码
  • 支持各种Markdown语法
  • 一键复制HTML
  • 提供5个示例模板

支持的Markdown语法

1. 标题

# H1 标题
## H2 标题
### H3 标题
#### H4 标题
##### H5 标题
###### H6 标题

2. 文本样式

**粗体文本**__粗体文本__
*斜体文本*_斜体文本_
~~删除线~~
`内联代码`

3. 列表

## 无序列表
- 项目1
- 项目2
- 嵌套项目
- 另一个嵌套项目

## 有序列表
1. 第一项
2. 第二项
3. 第三项

4. 链接和图片

[链接文本](https://example.com)
![替代文本](图片URL)

5. 代码块

```javascript
function hello() {
console.log("Hello World");
}
```

6. 引用

> 这是一个引用。
> 可以跨越多行。

7. 表格

| 标题1 | 标题2 | 标题3 |
|------|------|------|
| 内容1 | 内容2 | 内容3 |
| 内容4 | 内容5 | 内容6 |

8. 水平线

---
***
___

使用案例

博客文章撰写

# 我的第一篇博客文章

你好!今天我们来学习**Markdown**

## 什么是Markdown?

Markdown是一种轻量级标记语言,允许您使用
*简单的语法*编写文档。

### 优点
1. 易于学习
2. 易于阅读
3. 广泛的平台支持

文档编写

# API文档

## 端点

### GET /api/users

获取用户列表。

**响应示例:**
```json
{
"users": [
{"id": 1, "name": "John"}
]
}

### README创建
```markdown
# 项目名称

项目的简要说明

## 安装

```bash
npm install

使用

  1. 克隆仓库
  2. 安装依赖
  3. 运行服务器

## 使用技巧

1. **实时查看**: 在左侧编写Markdown,中间即时查看预览。

2. **复制HTML**: 使用右侧面板的"Copy HTML"按钮复制生成的HTML。

3. **使用示例**: 点击顶部的示例按钮学习各种Markdown语法。

4. **博客写作**: 用Markdown编写内容并转换为HTML以直接发布到博客。

5. **文档编写**: 在预览技术文档或README文件时非常有用。

## 相关工具

- [Base64 Encoder](/docs/playground/base64-encoder)
- [URL Encoder](/docs/playground/url-encoder)
- [HTML Formatter](/docs/playground/html-formatter)
- [Text Diff Checker](/docs/playground/text-diff-checker)