Markdown转HTML

Markdown转HTML转换器,支持实时预览和多格式导出

Markdown编辑器

HTML预览

HTML预览将显示在这里...

支持的Markdown语法

标题、段落、列表
粗体、斜体、删除线
链接和图片
代码块和语法高亮
表格和引用
数学公式(LaTeX)
Emoji表情
任务列表
脚注
目录生成

快速操作

快捷键

Ctrl+B - 粗体
Ctrl+I - 斜体
Ctrl+K - 链接
Ctrl+S - 保存
Ctrl+P - 预览
F11 - 全屏

当前主题

github
主题会影响导出的HTML样式

输出设置

Markdown 完全指南

掌握 Markdown 语法,提升写作和文档制作效率

基础语法

标题 (Headers)

# H1 标题
## H2 标题
### H3 标题

# 的数量表示标题级别

文本样式

**粗体文本**
*斜体文本*
~~删除线文本~~
`行内代码`

使用符号包围文本来添加样式

列表 (Lists)

- 无序列表项 1
- 无序列表项 2

1. 有序列表项 1
2. 有序列表项 2

- 或 * 创建无序列表,数字创建有序列表

高级语法

代码块

```javascript
function hello() {
  console.log('Hello!');
}
```

用三个反引号包围代码,可指定语言

表格 (Tables)

| 标题1 | 标题2 |
|-------|-------|
| 内容1 | 内容2 |

使用 | 分隔列,- 分隔标题行

链接和图片

[链接文本](https://example.com)
![图片描述](image.jpg)

! 前缀表示图片,否则为链接

最佳实践

📝

保持一致的格式

统一使用相同的符号和缩进风格

📚

合理使用标题层级

从 H1 开始,按顺序递进使用标题

🔗

添加有意义的链接文本

避免使用"点击这里",使用描述性文本

📖

使用空行分隔内容块

在段落、列表、代码块间添加空行

🎯

为代码块指定语言

启用语法高亮,提高可读性

🌟

适当使用引用和强调

突出重要信息,但不要过度使用

编辑器与工具

在线编辑器

Typora所见即所得编辑器
StackEdit在线 Markdown 编辑器
Dillinger云端 Markdown 编辑器

代码编辑器插件

VS CodeMarkdown 预览插件
Sublime TextMarkdownPreview 包
Atommarkdown-preview-plus

移动端应用

BeariOS/Mac 笔记应用
iA Writer跨平台写作工具
Notion支持 Markdown 的笔记

常见应用场景

📖 技术文档

  • API 文档编写
  • README 文件
  • 项目说明文档
  • 安装指南

✍️ 内容创作

  • 博客文章写作
  • 学术论文格式
  • 电子书编写
  • 新闻稿制作

📊 项目管理

  • 会议记录
  • 项目计划书
  • Wiki 页面
  • 任务清单

语法速查表

基本格式

粗体:
**text** or __text__
斜体:
*text* or _text_
代码:
`code`
删除线:
~~text~~

结构元素

链接:
[text](URL)
图片:
![alt](URL)
引用:
> quote text
分隔线:
---

常见问题解决

❌ 列表不显示
✅ 在列表项前确保有空行,使用正确的缩进
❌ 代码块无语法高亮
✅ 在 ``` 后添加语言标识符
❌ 链接显示为文本
✅ 检查括号和方括号的正确配对
❌ 表格格式混乱
✅ 确保每行有相同数量的 | 分隔符
❌ 特殊字符显示异常
✅ 使用反斜杠 \ 转义特殊字符
❌ 标题编号不连续
✅ 按 H1→H2→H3 顺序使用标题层级

相关工具推荐

Markdown转HTML - 在线Markdown转换器 | 实时预览编辑器 | SolarStar