javascript如何实现Markdown解析_marked.js如何使用

紅蓮之龍 2025-12-21 00:00:00 次阅读

最常用、最成熟的 JavaScript Markdown 解析方案是 marked.js，它轻量快速、支持 CommonMark 与 GFM 扩展，兼容浏览器和 Node.js，提供同步/异步渲染、自定义渲染器及安全 sanitize 选项。

JavaScript 中实现 Markdown 解析，最常用、最成熟的方式就是使用 marked.js。它轻量、速度快、支持 CommonMark 规范，且可扩展，适合浏览器端和 Node.js 环境。

安装与引入 marked.js

根据运行环境选择方式：

浏览器中直接使用 CDN（适合快速上手或简单页面）：

引入后全局可用 marked 函数。
Node.js 项目中安装（推荐用于服务端渲染或构建流程）：
npm install marked
然后在代码中：
const marked = require('marked');（CommonJS）
或 import marked from 'marked';（ES Module）

基础用法：把 Markdown 字符串转为 HTML

最简单的调用只需一行：

const html = marked('# Hello\n\nThis is **bold** and [a link](/).');

结果是带格式的 HTML 字符串，可插入 DOM：

document.getElementById('content').innerHTML = html;

⚠️ 注意：marked 默认不转义 HTML 标签（即允许原始 HTML），如需安全渲染（尤其处理用户输入），应开启 sanitize: true 或配合 DOMPurify 使用。

常用配置选项（options）

通过传入配置对象，可定制解析行为：

启用 GFM 表格、删除线、任务列表等扩展语法：
marked.setOptions({ gfm: true, breaks: true });
（breaks: true 将换行符转为）
禁用 HTML 解析（提升安全性）：
marked.setOptions({ sanitize: true });
或更推荐：用 marked.parse() + DOMPurify.sanitize() 组合。

自定义渲染器（比如给标题加锚点、链接加 target="_blank"）：

const renderer = new marked.Renderer();

  renderer.link = (href, title, text) => `${text}`;

  marked.setOptions({ renderer });

异步渲染与扩展（如代码高亮）

marked 支持异步渲染（例如等待 Prism.js 加载后高亮）：

marked.setOptions({
  async: true,
  highlight: function(code, lang) {
    return Promise.resolve(Prism.highlight(code, Prism.languages[lang || 'plaintext'], lang));
  }
});

注意：启用 async: true 后，marked() 返回 Promise，需用 await 或 .then() 处理。

基本上就这些。marked.js 上手快、文档全、生态稳，日常 Markdown 渲染需求基本一招覆盖。