I’m using commonmark.js to render markdown on my site. I’d like to change the way a couple tags are generated:
anchor tags (<a/>): I’d like to add target="_blank" based on the href’s value.
headings (h1, h2, etc): I’d like to set the heading’s id attribute based on a convention.
What’s the best way to accomplish this? Is there a way to plugin this logic to commonmark.js or should I directly manipulate the rendered output using jquery/etc?
I’ve seen the documentation here on walking the AST but it doesn’t look like this will allow me to do anything that would have the effect of adding attributes to the rendered HTML.
I’ve been meaning to make the renderer more customizable by splitting out renderers for individual elements and allowing them to be modified individually. Here’s an issue for this: https://github.com/jgm/commonmark.js/issues/6
At this point you have two options:
Modify the HTML renderer (lib/html.js). Search for case 'Link' and it should be pretty obvious what to do.
Traverse the AST looking for links, and replace these with raw html elements. In practice this is ugly, especially since you’d have to do your own escaping, etc.