# Pass heading classes via Goldmark to render-heading hook

**URL:** https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356
**Category:** feature
**Created:** [November 11, 2020, 10:28pm UTC](https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356 "2020-11-11T22:28:50Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![AlanBreck](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alanbreck/32/11694_2.png) [@AlanBreck](https://discourse.gohugo.io/u/AlanBreck)
#### Post date: [November 11, 2020, 10:28pm UTC](https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356/1 "2020-11-11T22:28:50Z")

</div>

With Goldmark, I’m able to add classes to my headings via Markdown like so:

```auto
## Brave Browser{.text-center}

```

Is there a way that I can access that class via the context passed down to the `render-heading` hook? I’m not seeing any way [in the docs](https://gohugo.io/getting-started/configuration-markup#render-hook-templates), however I’m hoping that there’s some undocumented means of doing so.

Thanks so much!

---

<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: [November 12, 2020, 6:57am UTC](https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356/2 "2020-11-12T06:57:01Z")

</div>

Hello,

I don’t think that this feature is currently available in Hugo.

Perhaps others know more.

---

<div class="post-metadata">

### Author: ![peaceiris](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/peaceiris/32/7358_2.png) [@peaceiris](https://discourse.gohugo.io/u/peaceiris)
#### Post date: [November 12, 2020, 8:48am UTC](https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356/3 "2020-11-12T08:48:31Z")

</div>

This previous work may be helpful.

> [@A way to add parameters to image and link render hooks](https://discourse.gohugo.io/t/a-way-to-add-parameters-to-image-and-link-render-hooks/23496):
>
> While there’s a [proposal to add parameters to render hooks](https://github.com/gohugoio/hugo/issues/6670), I found a somewhat decent solution which uses the title attribute and the [transform.Unmarshal](https://gohugo.io/functions/transform.unmarshal/) function. Links and images in markdown allow you to specify a title parameter. ![Alt text 'title'](url) [Link text](url 'title') Using the [transform.Unmarshal](https://gohugo.io/functions/transform.unmarshal/) function, we can set the title to a JSON string which can then make the parameters. For example, here’s how you can use the title to add additional attributes to the rendered link tag…

---

<div class="post-metadata">

### Author: ![fgandiya](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/fgandiya/32/10119_2.png) [@fgandiya](https://discourse.gohugo.io/u/fgandiya)
#### Post date: [November 12, 2020, 12:05pm UTC](https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356/4 "2020-11-12T12:05:52Z")

</div>

You could try specifying the classes for the headers in the front matter and render them out in the render hook.

---

<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: [November 12, 2020, 2:34pm UTC](https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356/5 "2020-11-12T14:34:44Z")

</div>

The OP refers to [this Goldmark feature](https://github.com/yuin/goldmark#attributes):

> Attributes
> 
> The `parser.WithAttribute` option allows you to define attributes on some elements.
> 
> Currently only headings support attributes.
> 
> **Attributes are being discussed in the [CommonMark forum](https://talk.commonmark.org/t/consistent-attribute-syntax/272). This syntax may possibly change in the future.**
> 
> #### Headings
> 
> ```auto
> ## heading ## {#id .className attrName=attrValue class="class1 class2"}
> 
> ## heading {#id .className attrName=attrValue class="class1 class2"}
> 
> ```
> 
> ```auto
> heading {#id .className attrName=attrValue}
> ============
> 
> ```

Currently Hugo does output the class attribute from a markdown heading in the generated HTML.

In my comment above what I really meant was that I am not aware whether the markdown heading class attribute can be read from a render-heading hook template.

---

<div class="post-metadata">

### Author: ![patbak](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@patbak](https://discourse.gohugo.io/u/patbak)
#### Post date: [December 30, 2020, 7:16am UTC](https://discourse.gohugo.io/t/pass-heading-classes-via-goldmark-to-render-heading-hook/29356/6 "2020-12-30T07:16:20Z")

</div>

Here is my way of hacking around this limitation for now. I only needed classes so made it simple. Conceivably this could be expanded on to support the full range of ids, classes, and attributes values.

```
{{- $text := ( .Text | htmlUnescape ) -}}
{{- $class := findRE "{.+}" $text 1 -}}
{{- if $class -}}
    {{- $class = index $class 0 }}
    {{- $text = replace $text $class "" -}}
    {{- $text = trim $text " " -}}
    {{- $class = trim $class "{}" -}}
{{- end -}}
<h{{ (add .Level 1) }} id="{{ $text | anchorize | safeURL }}"{{ with $class }} class="{{ . }}"{{ end }}>{{ $text }}</h{{ (add .Level 1)
 }}>
```
