使用 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,无需安装:

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

相关推荐
打不着的大喇叭40 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue1 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷1 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js
凌览1 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣1 小时前
JS用法:Map,Set和异步函数
前端·javascript
独立开阀者_FwtCoder2 小时前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript