📝
免费 Markdown 编辑器
实时编写和预览 Markdown。支持标题、粗体、斜体、代码块、表格和列表。
加载后可离线使用
53 词数 · 346 字符
Markdown
预览
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">欢迎使用Markdown编辑器</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">在左侧编写<strong>Markdown</strong>，在右侧查看实时预览。</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">功能</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>粗体</strong>、<em>斜体</em>和<del>删除线</del></li><li class="my-0.5"><code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">行内代码</code>和代码块</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">链接</a></li><li class="my-0.5">列表、引用块、表格等</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">代码示例</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown由John Gruber在2004年创建，旨在使网络写作变得更加简便。</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">功能</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">支持</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">标题</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">列表</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">表格</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">代码</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Markdown 速查表
# Heading 1H1
**bold**粗体
*italic*斜体
`code`行内代码
- item无序列表
1. item有序列表
> quote块引用
[text](url)链接
图片
---分隔线
常见用途
- 在Markdown中编写API文档在Markdown中起草端点描述、请求/响应示例和参数表。
- 使用Markdown做笔记用Markdown编写结构化笔记，可以粘贴到Notion、Obsidian、Bear或任何Markdown应用中。
- 用Markdown编写GitHub README使用实时Markdown渲染起草和预览你的GitHub仓库README。
- 编写技术文档在Markdown中编写和预览API文档、wiki和技术指南，然后再发布。
- 用Markdown编写博客文章为Ghost、Jekyll、Hugo、Hashnode和其他基于Markdown的发布平台起草博客文章。
工作原理
预览由直接内置在工具中的手写 Markdown 解析器渲染——没有 marked、没有 remark，也没有外部库。它在浏览器中逐行对源文本分词，将语法转换为 HTML，并在显示前经过清理器处理。
- 1逐行分词自定义的 renderMarkdown 函数按换行拆分源文本并一次遍历，按优先级匹配围栏代码块、标题（H1–H6）、引用块、有序和无序列表、GFM 表格（含列对齐）、水平线和段落。
- 2内联语法展开然后每个收集到的行或单元格由 inlineMarkdown 处理，这是一系列正则替换，处理粗体（** 和 __）、斜体（* 和 _）、粗斜体（***）、删除线（~~）、行内代码（）、图片（）和链接（[text](url)）——图片在链接之前解析，以免错误地消耗 ! 前缀。
- 3清理与远程资源拦截渲染器生成的原始 HTML 会经过清理器（sanitize-html），去除 <script>、onerror 处理程序和 javascript: 链接等不安全的标签和属性。第二轮处理（neutralizeRemote）默认将远程图片的 src 值替换为占位符，防止预览在你同意之前悄悄连接外部服务器。
- 4导出为 .md 或独立 .html复制或下载 Markdown 会写入原始源文本。下载 HTML 会将清理后的输出包装为带内联样式表的独立文档——Tailwind 类只在本站内有效，因此导出时改为打包普通 CSS 规则，使文件在任何地方都能正常阅读。