# HtmlRenderer- ability to customize element rendering? (javascript)

**URL:** <https://talk.commonmark.org/t/htmlrenderer-ability-to-customize-element-rendering-javascript/1057>\
**Category:** Implementation\
**Created:** [February 18, 2015, 4:27pm UTC](https://talk.commonmark.org/t/htmlrenderer-ability-to-customize-element-rendering-javascript/1057 "2015-02-18T16:27:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jdanyow](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/jdanyow/32/593_2.png) [@jdanyow](https://talk.commonmark.org/u/jdanyow)\
**Post date:** [February 18, 2015, 4:27pm UTC](https://talk.commonmark.org/t/htmlrenderer-ability-to-customize-element-rendering-javascript/1057/1 "2015-02-18T16:27:20Z")

</div>

I’m using [commonmark.js](https://github.com/jgm/commonmark.js) to render markdown on my site. I’d like to change the way a couple tags are generated:

1. anchor tags (`<a/>`): I’d like to add `target="_blank"` based on the href’s value.
2. 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](https://github.com/jgm/commonmark.js#usage) 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.

[Related stackoverflow post](http://stackoverflow.com/questions/28588479/customize-anchor-and-heading-rendering-in-commonmark-js)

---

<div class="post-metadata">

**Author:** ![jgm](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/jgm/32/1360_2.png) [@jgm](https://talk.commonmark.org/u/jgm)\
**Post date:** [February 18, 2015, 6:08pm UTC](https://talk.commonmark.org/t/htmlrenderer-ability-to-customize-element-rendering-javascript/1057/2 "2015-02-18T18:08:48Z")

</div>

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](https://github.com/jgm/commonmark.js/issues/6)

At this point you have two options:

1. Modify the HTML renderer (`lib/html.js`). Search for `case 'Link'` and it should be pretty obvious what to do.

2. 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.

---

<div class="post-metadata">

**Author:** ![jochenwezel](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/jochenwezel/32/1034_2.png) [@jochenwezel](https://talk.commonmark.org/u/jochenwezel)\
**Post date:** [September 30, 2016, 12:29pm UTC](https://talk.commonmark.org/t/htmlrenderer-ability-to-customize-element-rendering-javascript/1057/3 "2016-09-30T12:29:11Z")

</div>

There seems to be a principle solution at [html - Can I create links with 'target="\_blank"' in Markdown? - Stack Overflow](http://stackoverflow.com/questions/4425198/markdown-target-blank) like following:

> With Markdown-2.5.2, you can use this:  
> `[link](url){:target="_blank"}`

Waiting now for support by [CommonMark.NET](http://CommonMark.NET) (v0.1.0.0 doesn’t support it)
