Markdown到HTML转换器

粘贴Markdown代码并转换为清晰的语义化HTML格式,包括<h1><h6><ul><ol><table><pre><code>(含高亮语法标记)、<blockquote>以及自动链接的URL。根据需求选择完整文档(含<html><head>及最小样式表)或片段内容(仅包含正文),适用于集成到现有页面或生成独立文件两种场景。

如何将 Markdown 转换为 HTML

  1. 1

    粘贴 Markdown

    完整文档或片段。若存在 YAML 前言,则会自动移除。

  2. 2

    选择扩展集

    仅限CommonMark、 GFM(表格、任务列表、自动链接)或 GFM +数学。

  3. 3

    选择输出模式

    用于嵌入的片段,或包含页眉及最少CSS代码的完整HTML文档。

  4. 4

    复制或下载 HTML

    将HTML内容作为文本获取,或另存为`.html`格式文件。

映射表

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
使用 lang 语言编写的封装代码 <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
GFM 表 <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

语法高亮

带有语言提示的带边界代码块会在 <code> 元素上添加 class="language-xxx" 属性。当启用“预高亮”功能时,转换器还会将 highlight.js 生成的分词输出结果内联显示,这在目标页面未加载高亮运行时环境时尤为实用。

全文与片段对比

  • 片段仅包含内部HTML代码,请以<h1>或首个元素名称开头,粘贴至现有CMS区块、邮件正文或前端组件中。
  • 完整文档会使用默认的小型样式表(包括字体、代码块和表格)将文本包裹在<!DOCTYPE html><html><head>中。保存为.html格式后,可在任意浏览器中直接打开,无需额外文件。

内联与外部CSS

  • 内联样式(可切换)将所有CSS代码直接写入元素中。虽然效果不太美观,但非常适合电子邮件模板使用。
  • (默认设置)可保持HTML代码简洁,并由网站的样式表负责样式处理。

可访问性说明

  • 标题应以语义形式呈现为 <h1><h6>,同时保留原有层级结构。请勿在源代码中跳过任何层级。
  • 不含替代文本的图像会生成 <img alt="">(专为装饰性图像设置的空替代文本);但若图像确实用于装饰,则必须添加替代文本。
  • 表格的标题行将采用<thead>格式,从而提升屏幕阅读器的导航体验。

常见问题

是的。源代码中的原始HTML会未经处理地直接输出,其中的脚本标签和事件属性均会被移除。如果您需要未过滤的输出结果(且信任输入内容),系统提供相应的开关选项,但请勿在用户提供的内容上使用该功能。

GFM 任务列表(- [x]- [ ])将转换为<input type="checkbox" disabled>元素。disabled属性可防止渲染视图中出现意外的状态变更。

是的,请启用内联样式功能。该转换器会在每个区块中插入一个基础样式属性,这正是电子邮件客户端(如 Outlook、Gmail)所需的功能,因为它们会移除 <style> 格式的区块。

启用数学扩展功能,并使$x^2$$$...$$模块通过KaTeX进行渲染。该转换器可输出静态 SVG 或HTML格式,无需运行时MathJax组件。

不。解析和HTML生成均在您的浏览器中完成。源代码和输出结果始终不会离开您的设备。

相关工具

此工具还提供其他语言版本