# Adding class to heading not working while attribute adds just fine

**URL:** <https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048>\
**Category:** support\
**Created:** [January 7, 2025, 3:13pm UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048 "2025-01-07T15:13:02Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gvaley](https://avatars.discourse-cdn.com/v4/letter/g/9fc348/32.png) [@gvaley](https://discourse.gohugo.io/u/gvaley)\
**Post date:** [January 7, 2025, 3:13pm UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/1 "2025-01-07T15:13:03Z")

</div>

I read the [docs](https://gohugo.io/content-management/markdown-attributes/) as well as several other support topics before adding a class and an attribute to a heading and a paragraph. The outcome is as follows:

- Adding a class to a paragraph works
- Adding an attribute to a paragraph works
- Adding a class to a heading _does not work_
- Adding an attribute to a heading works

Hugo environment:

```auto
hugo v0.139.3+extended+withdeploy linux/amd64 BuildDate=2024-11-29T15:36:56Z VendorInfo=brew
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.23.3"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"

```

My config file:

```auto
markup:
  goldmark:
    parser:
      attribute:
        block: true
        title: true
    renderer:
      unsafe: true

```

My markdown page:

```auto
## User Manual {class="foo bar" id="bax"}

Lorem ipsum.
{class="fooo" id="baz"}

```

I also tried with H1 and H2, as well as with all kinds of full and shorthand syntax for the HTML with no luck.

This configuration renders this:

```auto
<h3 id="bax">User Manual<a class="td-heading-self-link" href="#bax" aria-label="Heading self-link"></a></h3>
<p class="fooo" id="baz">Lorem ipsum.</p>

```

Why is Hugo ignoring classes added to a title?

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [January 7, 2025, 4:40pm UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/2 "2025-01-07T16:40:12Z")

</div>

It looks like either you or your theme has implemented a [heading render hook](https://gohugo.io/render-hooks/headings/). Look for a file named render-heading.html and post its contents here.

---

<div class="post-metadata">

**Author:** ![gvaley](https://avatars.discourse-cdn.com/v4/letter/g/9fc348/32.png) [@gvaley](https://discourse.gohugo.io/u/gvaley)\
**Post date:** [January 8, 2025, 8:32am UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/3 "2025-01-08T08:32:03Z")

</div>

Thanks jmooring.

I’m using Docsy. Indeed there’s a render-heading.html file, reading the following:

```auto
{{ template "_default/_markup/td-render-heading.html" . }}

```

The template it points to contains the following:

```auto
h{{ .Level }} id="{{- .Anchor | safeURL -}}">
  {{- .Text | safeHTML -}}
  {{ template "_default/_markup/_td-heading-self-link.html" . -}}
</h{{ .Level }}>

{{- define "_default/_markup/_td-heading-self-link.html" -}}
<a class="td-heading-self-link" href="#{{ .Anchor | safeURL }}" aria-label="Heading self-link"></a>
{{- end -}}            

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [January 8, 2025, 5:15pm UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/4 "2025-01-08T17:15:59Z")

</div>

Please raise an issue with the theme maintainers.

Until they change the template, you can override it based on these examples:  
[https://gohugo.io/render-hooks/headings/#examples](https://gohugo.io/render-hooks/headings/#examples)

---

<div class="post-metadata">

**Author:** ![gvaley](https://avatars.discourse-cdn.com/v4/letter/g/9fc348/32.png) [@gvaley](https://discourse.gohugo.io/u/gvaley)\
**Post date:** [January 9, 2025, 7:41am UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/5 "2025-01-09T07:41:58Z")

</div>

_Edited to make the information suitable for marking as a solution_

Thanks for all the help!

For other Docsy users, this is how I changed the code. Place the following in `layouts/_default/_markup/render-heading.html` (create it if you don’t have it; thanks, jmooring!):

```auto
<h{{ .Level }} id="{{- .Anchor | safeURL -}}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{- .Text | safeHTML -}}
  {{ template "_default/_markup/_td-heading-self-link.html" . -}}
</h{{ .Level }}>

{{- define "_default/_markup/_td-heading-self-link.html" -}}
<a class="td-heading-self-link" href="#{{ .Anchor | safeURL }}" aria-label="Heading self-link"></a>
{{- end -}}

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [January 9, 2025, 9:19am UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/6 "2025-01-09T09:19:19Z")

</div>

The contents of the Hugo’s cache directory are temporary. You will lose the changes when you upgrade the module, clear the cache, etc.

Never modify a theme or module file. Override it instead.

```plaintext
mkdir -p layouts/_default/_markup
touch layouts/_default/_markup/render-heading.html

```

Then place the revised code in the file you just created.

---

<div class="post-metadata">

**Author:** ![gvaley](https://avatars.discourse-cdn.com/v4/letter/g/9fc348/32.png) [@gvaley](https://discourse.gohugo.io/u/gvaley)\
**Post date:** [January 9, 2025, 2:13pm UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/7 "2025-01-09T14:13:06Z")

</div>

The Docsy maintainers were extremely quick. The [fix is already merged](https://github.com/google/docsy/pull/2165). I assume it will appear in 0.12.0.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [January 11, 2025, 2:14pm UTC](https://discourse.gohugo.io/t/adding-class-to-heading-not-working-while-attribute-adds-just-fine/53048/8 "2025-01-11T14:14:04Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.