使用 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，无需安装：

<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