Marked中使用自定义Renderer后gfmHeadingId扩展失效，如何解决？

当你在marked.parse中传入全新的Renderer实例时，会覆盖通过marked.use(gfmHeadingId())修改过的默认Renderer，导致扩展失效——因为gfmHeadingId是通过修改默认Renderer的heading方法来添加id属性的，而你新建的Renderer用的是原始未修改的方法。

以下两种方法可以解决这个问题：

方法一：基于扩展后的默认Renderer做自定义 #

直接继承marked已经被gfmHeadingId修改过的默认Renderer，再添加你的自定义逻辑：

const originalText = '## hello world';
marked.use(gfmHeadingId());

// 继承经过扩展的默认Renderer
class CustomRenderer extends marked.Renderer {
  // 在这里添加你需要自定义的渲染方法，比如：
  // paragraph(text) {
  //   return `<p class="custom-paragraph">${text}</p>`;
  // }
}

const text = marked.parse(originalText, {
  renderer: new CustomRenderer(),
});
console.log(text); // 输出: <h2 id="hello-world">hello world</h2>

方法二：手动整合gfmHeadingId逻辑到自定义Renderer #

如果需要完全从零实现Renderer，可以手动把gfmHeadingId的slug生成逻辑整合到heading方法中：

const originalText = '## hello world';
// 利用marked内置的slug生成工具
const { slugify } = marked;

class CustomRenderer extends marked.Renderer {
  heading(text, level, raw) {
    // 生成和gfmHeadingId一致的id
    const id = slugify(raw);
    return `<h${level} id="${id}">${text}</h${level}>`;
  }
}

const text = marked.parse(originalText, {
  renderer: new CustomRenderer(),
});
console.log(text); // 输出: <h2 id="hello-world">hello world</h2>

内容的提问来源于stack exchange，提问作者Robert