5分钟快速上手Marked.js：零基础Markdown解析教程
项目地址: https://gitcode.com/gh_mirrors/ma/marked 还在为网页内容格式化而烦恼吗？Marked.js是一个轻量级的Markdown解析器，它能让你在短短几分钟内将简单的Markdown文本转换为精美的HTML内容。无论你是前端新手还是资深开发者，这个强大的工具都能让你的开发效率瞬间提升！🚀
为什么选择Marked.js？
👉 极速解析：专为性能优化，解析速度超乎想象 👉 全面兼容：支持所有主流Markdown语法规范 👉 跨平台运行：浏览器、服务器、命令行全场景适用 👉 轻量级设计：不增加项目负担，专注核心功能
一键安装Marked.js
安装Marked.js就像喝一杯咖啡那么简单！☕ 打开你的终端，输入以下命令：
npm install marked
或者直接在浏览器中使用CDN版本：
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
5行代码实现Markdown解析
准备好了吗？让我们开始真正的魔法时刻！✨
// 导入Marked.js
import { marked } from 'marked';
// 你的Markdown内容
const markdownText = '# 欢迎使用Marked.js!\n\n这是**加粗**的文字';
// 一键转换
const htmlOutput = marked.parse(markdownText);
// 显示结果
document.getElementById('content').innerHTML = htmlOutput;
看！只需要5行代码，你就完成了从Markdown到HTML的华丽变身！✅
实时预览配置技巧
想让你的Markdown解析更个性化？Marked.js提供了丰富的配置选项：
// 自定义配置
marked.setOptions({
breaks: true, // 将换行符转换为<br>
gfm: true, // 启用GitHub风格的Markdown
headerIds: false // 禁用自动生成标题ID
});
// 使用自定义配置解析
const customHtml = marked.parse('你的Markdown内容');
自定义渲染技巧大揭秘
想要完全掌控HTML输出？Marked.js的自定义渲染器功能让你成为真正的样式大师！🎨
// 创建自定义渲染器
const renderer = new marked.Renderer();
// 自定义标题渲染
renderer.heading = function(text, level) {
return `<h${level} class="custom-heading">${text}</h${level}>`;
};
// 应用自定义渲染器
marked.use({ renderer });
// 现在所有标题都会带有custom-heading类！
安全第一：HTML净化指南
🚨 重要提醒：Marked.js默认不净化HTML输出！为了保护你的应用安全，请务必使用DOMPurify等库：
import DOMPurify from 'dompurify';
// 安全解析Markdown
const safeHtml = DOMPurify.sanitize(marked.parse(markdownText));
进阶功能探索
准备好挑战更高级的功能了吗？Marked.js还支持：
- 异步解析：处理大量内容不阻塞UI
- 语法高亮：与highlight.js完美集成
- 扩展语法：自定义Markdown语法规则
查看官方文档：docs/INDEX.md 获取更多高级用法！
实战示例：构建实时预览编辑器
让我们用Marked.js构建一个简单的实时Markdown预览器：
<!DOCTYPE html>
<html>
<head>
<title>实时Markdown预览</title>
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
</head>
<body>
<div style="display: flex;">
<textarea id="editor" style="width: 50%; height: 300px"
oninput="updatePreview()"></textarea>
<div id="preview" style="width: 50%; border: 1px solid #ccc; padding: 10px"></div>
</div>
<script>
function updatePreview() {
const markdown = document.getElementById('editor').value;
document.getElementById('preview').innerHTML = marked.parse(markdown);
}
</script>
</body>
</html>
总结
恭喜你！🎉 在短短5分钟内，你已经掌握了：
✅ Marked.js的基本安装和使用 ✅ 实时Markdown解析技巧
✅ 自定义渲染和配置方法 ✅ 安全净化HTML的最佳实践 ✅ 构建实时预览编辑器的实战技能
Marked.js的强大远不止于此，继续探索源码目录：src/ 发现更多精彩功能！
记住，最好的学习方式就是动手实践。现在就去创建你的第一个Marked.js项目吧！💪
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
