使用 marked.min.js 实现 Markdown 编辑器 —— 我的博客后台选择之旅

最近，我决定为个人博客后台换一个编辑器。之前的富文本编辑器虽然功能齐全，但生成的 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，无需安装：

---

步骤 2：创建 Markdown 编辑区域

在 HTML 页面中，使用 textarea 输入 Markdown，并在 div 中实时显示解析后的 HTML：

---

步骤 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：

htmlOutput.innerHTML = DOMPurify.sanitize(marked.parse(markdownText));

---

✅ 支持代码高亮

为了让代码块更美观，我们可以使用 highlight.js 进行语法高亮：

marked.setOptions({ highlight: function (code) { return hljs.highlightAuto(code).value; } });

---

✅ 自定义 Markdown 渲染方式

如果想自定义 Markdown 渲染方式（例如修改标题格式），可以使用 marked.use()：

marked.use({ renderer: { heading(text, level) { return `${text}`; } } });

---

4. 完整示例代码

    
    
    
    
    
    
    
    


    
Markdown 编辑器
    
    


    

---

5. 总结

通过 marked.min.js，我们可以轻松地在博客后台实现 Markdown 编辑器，实现 Markdown 解析、HTML 预览，并结合 highlight.js 添加代码高亮，同时使用 DOMPurify 保障安全性。

为什么选择 marked.min.js？
✅ 解析速度快
✅ 代码清晰简洁
✅ 支持 GitHub 风格 Markdown
✅ 结合 highlight.js 让代码块更美观
✅ 可扩展性强，自定义渲染方式

这样，我们就完成了一个轻量级的 Markdown 编辑器，非常适合用于博客后台或在线 Markdown 解析工具！

官方文档： Marked Documentation