17370845950

最常用、最成熟的 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 渲染需求基本一招覆盖。