Marked库中自定义代码块渲染器的使用技巧

2025-05-04 04:12:45作者：戚魁泉Nursing

Marked是一款轻量级且高效的Markdown解析器，适用于浏览器、服务器及命令行环境。它专为速度优化，采用底层编译技术，避免长时间阻塞或缓存，确保快速响应。支持多种Markdown特性及规范，完美适应现代开发需求。无论你是要构建动态网站、编写文档还是简单地命令行转换文本，Marked都能轻松应对。请注意，它不负责HTML输出的自动净化，请手动集成如DOMPurify等库保障安全性。想体验其强大功能？不妨一试其在线演示，或通过NPM轻松集成到你的项目中，让文档创作与呈现既快捷又灵活。

项目地址：https://gitcode.com/gh_mirrors/mar/marked

在Markdown解析库Marked的最新版本(v13.x)中，自定义渲染器的使用方式发生了一些变化。本文将详细介绍如何正确地在Marked中重写代码块(code)渲染函数，以及需要注意的关键点。

背景知识

Marked是一个流行的Markdown解析库，允许开发者通过自定义渲染器来修改默认的HTML输出。在v13版本之前，自定义渲染器可以直接通过覆盖renderer对象上的方法来实现。但随着v13版本的发布，这一机制有所调整。

问题现象

当开发者尝试在Marked v13中重写代码块渲染函数时，可能会遇到渲染不生效的问题。即使完全复制了源码中的实现方式，自定义的代码块渲染器也可能无法正常工作。

解决方案

在Marked v13中，需要使用新的配置选项来启用自定义渲染器：

marked.use({
  useNewRenderer: true,  // 关键配置项
  renderer: {
    code({ text, lang, escaped }) {
      // 自定义渲染逻辑
    }
  }
});

实现细节

一个完整的自定义代码块渲染器实现示例如下：

const renderer = {
  code({ text, lang, escaped }) {
    const langString = (lang || '').match(/^\S*/)?.[0];
    const code = text.replace(/\n$/, '') + '\n';

    if (!langString) {
      return `<pre><code>${escaped ? code : escape(code, true)}</code></pre>\n`;
    }

    return `<pre><code class="language-${escape(langString)}">${
      escaped ? code : escape(code, true)
    }</code></pre>\n`;
  }
};