# Custom rendering of header tag

**URL:** <https://discourse.gohugo.io/t/custom-rendering-of-header-tag/6591>\
**Category:** support\
**Created:** [May 15, 2017, 11:42pm UTC](https://discourse.gohugo.io/t/custom-rendering-of-header-tag/6591 "2017-05-15T23:42:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aslakhellesoy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aslakhellesoy/32/3187_2.png) [@aslakhellesoy](https://discourse.gohugo.io/u/aslakhellesoy)\
**Post date:** [May 15, 2017, 11:42pm UTC](https://discourse.gohugo.io/t/custom-rendering-of-header-tag/6591/1 "2017-05-15T23:42:42Z")

</div>

Hi everyone,

I’m writing a custom theme that I’m planning to use with a css framework ([http://bulma.io/](http://bulma.io/)). This framework expects header elements to have certain classes. For example:

`<h2 class="title is-2">Title 2</h2>`

However, Hugo/Blackfriday renders headers like this:

### Markdown input

`## Title 2`

### HTML Output

`<h2 id="title-2">Title 2</h2>`

Is there a way to customise how header elements (from Markdown) are rendered? A simple template for each element type would be ideal, but I can also write some go code if someone can point me in the right direction.

Thanks!  
Aslak

---

<div class="post-metadata">

**Author:** ![gsienkoPL](https://avatars.discourse-cdn.com/v4/letter/g/958977/32.png) [@gsienkoPL](https://discourse.gohugo.io/u/gsienkoPL)\
**Post date:** [May 16, 2017, 3:40am UTC](https://discourse.gohugo.io/t/custom-rendering-of-header-tag/6591/2 "2017-05-16T03:40:01Z")

</div>

Take a look on this [post](https://discuss.gohugo.io/t/how-i-extended-markdown-for-hugo/5983)

---

<div class="post-metadata">

**Author:** ![aslakhellesoy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aslakhellesoy/32/3187_2.png) [@aslakhellesoy](https://discourse.gohugo.io/u/aslakhellesoy)\
**Post date:** [May 16, 2017, 5:45am UTC](https://discourse.gohugo.io/t/custom-rendering-of-header-tag/6591/3 "2017-05-16T05:45:11Z")

</div>

Perfect thanks!!

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [May 16, 2017, 11:13am UTC](https://discourse.gohugo.io/t/custom-rendering-of-header-tag/6591/4 "2017-05-16T11:13:58Z")

</div>

I just use an empty shortcode inside a mardown file for this type of thing. No need to hack Hugo’s markdown engine.

For example

> ` {{< wrap >}}<h2 class="whatever">Blah-blah</h2>{{</ wrap >}}`

And my wrap.html shortcode is simply this:

> `{{ .Inner }}`

EDIT  
Or just type the `<h2 class="blah">Blah Blah</h2>` element straight. I just found out that Blackfriday accepts this.