最近，我决定为个人博客后台换一个编辑器。之前的富文本编辑器虽然功能齐全，但生成的 HTML 代码繁杂，维护起来非常麻烦。为了追求更简洁高效的写作体验，我开始研究 Markdown 编辑器，并最终选择了 marked.min.js。
1. 传统富文本 vs. Markdown 编辑器
在对比了传统富文本编辑器和 Markdown 编辑器后，我发现它们各有优缺点：
| 特性 | 传统富文本编辑器 | Markdown 编辑器 |
|---|---|---|
| 易用性 | 简单直观 | 需学习语法 |
| 格式控制 | 强大 | 简洁清晰 |
| 代码质量 | 冗余复杂 | 干净整洁 |
| 维护性 | 代码较难维护 | 代码结构清晰 |
| 学习成本 | 低 | 低 |
由于 Markdown 语法简洁，生成的 HTML 代码清爽易读，我最终选择了 Markdown 作为博客的主要编辑格式，并决定使用 marked.min.js 来解析 Markdown。
2. marked.min.js 介绍
marked.min.js 是一个轻量级、高性能的 JavaScript 库，可以将 Markdown 文本快速转换为 HTML，适用于博客、文档系统等场景。
marked.min.js 的特点：
✅ 解析速度快：比普通正则解析方式更高效
✅ 支持 GitHub 风格 Markdown，兼容 CommonMark 规范
✅ 支持扩展，可以自定义渲染方式，如代码高亮等
✅ 简单易用，可直接解析 Markdown 并输出 HTML
3. 在博客后台集成 marked.min.js
步骤 1：引入 marked.min.js
可以通过 CDN 方式引入 marked.min.js，无需安装：
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
步骤 2：创建 Markdown 编辑区域
在 HTML 页面中，使用 textarea 输入 Markdown，并在 div 中实时显示解析后的 HTML：
<textarea id="markdown-input" placeholder="输入 Markdown..."></textarea> <div id="html-output"></div>
步骤 3：解析 Markdown 并实时更新 HTML
使用 marked() 函数，将 textarea 输入的 Markdown 解析为 HTML，并动态更新 div 内容：
const markdownInput = document.getElementById('markdown-input'); const htmlOutput = document.getElementById('html-output'); markdownInput.addEventListener('input', () => { const markdownText = markdownInput.value; htmlOutput.innerHTML = marked.parse(markdownText); }); // 设置默认 Markdown 示例 markdownInput.value = "# Hello Markdown!\n\n- **加粗**\n- *斜体*\n- `代码块`\n\n[点击这里](https://github.com/markedjs/marked)"; htmlOutput.innerHTML = marked.parse(markdownInput.value);
步骤 4：优化和扩展功能
为了让 Markdown 编辑器更安全、更美观，我们可以进行以下优化：
✅ 防止 XSS 攻击（HTML 清理）
由于 marked 直接解析 Markdown 可能会导致 XSS 攻击，我们可以使用 DOMPurify 清理 HTML：
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
htmlOutput.innerHTML = DOMPurify.sanitize(marked.parse(markdownText));
✅ 支持代码高亮
为了让代码块更美观，我们可以使用 highlight.js 进行语法高亮：
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/common/highlight.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github.min.css">
marked.setOptions({ highlight: function (code) { return hljs.highlightAuto(code).value; } });
✅ 自定义 Markdown 渲染方式
如果想自定义 Markdown 渲染方式（例如修改标题格式），可以使用 marked.use()：
marked.use({ renderer: { heading(text, level) { return `<h${level} style="color:blue;">${text}</h${level}>`; } } });
4. 完整示例代码
复制
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Markdown 编辑器</title> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/common/highlight.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js/styles/github.min.css"> <style> body { font-family: Arial, sans-serif; margin: 20px; } textarea { width: 100%; height: 150px; padding: 10px; font-size: 16px; } #html-output { border: 1px solid #ccc; padding: 10px; margin-top: 10px; min-height: 100px; background: #f9f9f9; } </style> </head> <body> <h2>Markdown 编辑器</h2> <textarea id="markdown-input" placeholder="输入 Markdown..."></textarea> <div id="html-output"></div> <script> marked.setOptions({ highlight: function (code) { return hljs.highlightAuto(code).value; } }); const markdownInput = document.getElementById('markdown-input'); const htmlOutput = document.getElementById('html-output'); markdownInput.addEventListener('input', () => { const markdownText = markdownInput.value; htmlOutput.innerHTML = DOMPurify.sanitize(marked.parse(markdownText)); }); markdownInput.value = "# Hello Markdown!\n\n- **加粗**\n- *斜体*\n- `代码块`\n\n[点击这里](https://github.com/markedjs/marked)"; htmlOutput.innerHTML = DOMPurify.sanitize(marked.parse(markdownInput.value)); </script> </body> </html>
5. 总结
通过 marked.min.js，我们可以轻松地在博客后台实现 Markdown 编辑器，实现 Markdown 解析、HTML 预览，并结合 highlight.js 添加代码高亮，同时使用 DOMPurify 保障安全性。
🔹 为什么选择 marked.min.js？
✅ 解析速度快
✅ 代码清晰简洁
✅ 支持 GitHub 风格 Markdown
✅ 结合 highlight.js 让代码块更美观
✅ 可扩展性强，自定义渲染方式
这样，我们就完成了一个轻量级的 Markdown 编辑器，非常适合用于博客后台或在线 Markdown 解析工具！🚀
官方文档： Marked Documentation
