最近，我决定为个人博客后台换一个编辑器。之前的富文本编辑器虽然功能齐全，但生成的 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，无需安装：
javascript
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>步骤 2：创建 Markdown 编辑区域
在 HTML 页面中，使用 textarea 输入 Markdown，并在 div 中实时显示解析后的 HTML：
javascript
<textarea id="markdown-input" placeholder="输入 Markdown..."></textarea>
<div id="html-output"></div>步骤 3：解析 Markdown 并实时更新 HTML
使用 marked() 函数，将 textarea 输入的 Markdown 解析为 HTML，并动态更新 div 内容：
javascript
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：
javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"></script>
javascript
htmlOutput.innerHTML = DOMPurify.sanitize(marked.parse(markdownText));✅ 支持代码高亮
为了让代码块更美观，我们可以使用 highlight.js 进行语法高亮：
javascript
<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">
javascript
marked.setOptions({ highlight: function (code) { return hljs.highlightAuto(code).value; } });✅ 自定义 Markdown 渲染方式
如果想自定义 Markdown 渲染方式（例如修改标题格式），可以使用 marked.use()：
javascript
marked.use({ renderer: { heading(text, level) { return `<h${level} style="color:blue;">${text}</h${level}>`; } } });4. 完整示例代码
html
<!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