use extensions with renderer

[robertIsaac]

simply if I used this code the extension is working fine

const originalText = '## hello world';
marked.use(gfmHeadingId());
const text = marked.parse(originalText);
console.log('text') // <h2 id="hello-world">hello world</h2>

but if I changed it to

const originalText = '## hello world';
marked.use(gfmHeadingId());
const text = marked.parse(this.originalText, {
  renderer: new Renderer(),
});
console.log('text') // <h2>hello world</h2>

it stop working (the h2 doesn't have the id now)
how to make both work together?

[UziTech]

By passing the renderer in to the options you are overwriting the renderer in gfmHeadingId.

You can set the renderer first and then overwrite the heading renderer with gfmHeadingId.

marked.use({renderer: new Renderer()});
marked.use(gfmHeadingId());
const text = marked.parse(this.originalText)

[robertIsaac]

is there another way?
because I'm trying to upgrade https://github.com/jfcere/ngx-markdown to use latest version, and doing it like that will be another big breaking change
it's already big breaking change to make the users remove the old options and use extensions, making them do the same for renderer instead of sending it in the options will be a disaster

[UziTech]

You could try monkey patching something to get it to work but there is no other official way.

gfmHeadingId overwrites the heading renderer. If the heading renderer is overwritten again than the gfmHeadingId renderer won't get called.

[robertIsaac]

but why this code work as well?

marked.use(gfmHeadingId());
marked.use({renderer: new Renderer()});

[robertIsaac]

anyway if you can take a look at jfcere/ngx-markdown#474 and let me know if I can do better

[UziTech]

marked.use({renderer: new Renderer()}); actually doesn't overwrite anything because the use function trys to be smarter than marked.parse(markdown, { renderer: new Renderer()});.

marked.parse options just overwrites the renderers where marked.use looks at which renderers were added and only overwrites those renderers.

Since new Renderer() doesn't change any of the renderers marked.use won't overwrite anything. If you add a renderer the last renderer you add will be the first one run.

marked.use({gfmHeadingId()});
marked.use({renderer: { heading() { return 'hi';} } });

will overwrite the gfmHeadingId renderer with the new renderer.

A renderer can also fallback to the next renderer if it returns false;

marked.use({gfmHeadingId()});
marked.use({renderer: { heading() { return false;} } });

will run the last heading renderer first but fallback to gfmHeadingId because the last heading renderer returns false.

[robertIsaac]

okay, I changed the code so it use renderer then extensions