javascript如何实现Markdown解析_marked.js如何使用-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-12-21 21:16:02

原创

453人浏览过

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

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

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：

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

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

PHP5 和 MySQL 圣经

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。

485

查看详情

常用配置选项（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();<br>
  renderer.link = (href, title, text) => `<a href="https://www.php.cn/link/f011764aa39e28db078bf2d44bd5c81e" target="_blank">${text}</a>`;<br>
  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 渲染需求基本一招覆盖。

以上就是javascript如何实现Markdown解析_marked.js如何使用的详细内容，更多请关注php中文网其它相关文章！