当前位置：首页 > article >正文

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

article 2025/3/6 9:10:51

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