当前位置: 首页> 汽车> 维修 > 市场营销策略国内外研究现状_店铺装修风格有哪些_百度seo公司报价_深圳seo优化电话

市场营销策略国内外研究现状_店铺装修风格有哪些_百度seo公司报价_深圳seo优化电话

时间:2025/7/16 22:58:12来源:https://blog.csdn.net/fxrz12/article/details/146048360 浏览次数: 0次
市场营销策略国内外研究现状_店铺装修风格有哪些_百度seo公司报价_深圳seo优化电话

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

关键字:市场营销策略国内外研究现状_店铺装修风格有哪些_百度seo公司报价_深圳seo优化电话

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: