# TableOfContents doesn't render headings correctly that contains shortcode

**URL:** <https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399>\
**Category:** support\
**Tags:** shortcodes\
**Created:** [July 23, 2025, 4:37am UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399 "2025-07-23T04:37:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 23, 2025, 4:37am UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399/1 "2025-07-23T04:37:56Z")

</div>

Hi, I found that `TableOfContents` would not render the shortcode that with the headings.

```markdown
## Heading with Shortcode: {{< foo >}}

```

The shortcode output the `bar` only for testing.

As the image shown, the heading was rendered as `Heading with Shortcode: HAHAHUGOSHORTCODE4251s1HBHB`.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/1/b/1b050c78171f1cf98bf5a5af29f20ff523176ff8.png)

Would this be considered as a feature? If so, I will create a feature request on GitHub then.

---

<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:** [July 23, 2025, 2:38pm UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399/2 "2025-07-23T14:38:20Z")

</div>

> [@razon](#):
>
> `## Heading with Shortcode: {{< foo >}}`

Use the `{{% foo %}}` notation instead.

---

<div class="post-metadata">

**Author:** ![razon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/razon/32/14882_2.png) [@razon](https://discourse.gohugo.io/u/razon)\
**Post date:** [July 24, 2025, 3:46am UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399/3 "2025-07-24T03:46:20Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![ZhenShuo2021](https://avatars.discourse-cdn.com/v4/letter/z/59ef9b/32.png) [@ZhenShuo2021](https://discourse.gohugo.io/u/ZhenShuo2021)\
**Post date:** [July 24, 2025, 6:21pm UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399/4 "2025-07-24T18:21:49Z")

</div>

@jmooring In my case, the `{{% %}}` syntax prevents the HAHAHUGOSHORTCODE issue but doesn’t render icons in TOC.

Test markdown:

```markdown
Reddit icon: {{< icon "reddit" >}}

## Use `{{</* */>}}` syntax {{< icon "reddit" >}}

## Use `{{%/* */%}}` syntax {{% icon "reddit" %}}

```

Result:

 ![SCR-20250725-cxlp](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/9/b/9b2e991cbe7763c358f3392f08c32e7920c8b253.png)

Both `unsafe = true` and `unsafe = false` in goldmark.renderer don’t help.

Details:

Hugo v0.147.7

Icon shortcode: [blowfish/layouts/shortcodes/icon.html at main · nunocoracao/blowfish · GitHub](https://github.com/nunocoracao/blowfish/blob/main/layouts/shortcodes/icon.html)

```html
{{ $icon := resources.Get (printf "icons/%s.svg" ($.Get 0)) }}
{{ if $icon }}
  <span class="relative inline-block align-text-bottom icon">
    {{ $icon.Content | safeHTML }}
  </span>
{{ end }}

```

Is there a way to make TOC render HTML content from shortcodes properly?

---

<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:** [July 24, 2025, 8:37pm UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399/5 "2025-07-24T20:37:25Z")

</div>

> [@ZhenShuo2021](#):
>
> Is there a way to make TOC render HTML content from shortcodes properly?

It already does. The problem is that both your shortcode and the icon file contain newlines, and per the CommonMark spec the heading element ends at the first newline. Try it yourself:

[https://spec.commonmark.org/dingus/?text=%23%23%20Heading%20\<span\> something \<%2Fspan\>](https://spec.commonmark.org/dingus/?text=%23%23%20Heading%20%3Cspan%3E%0Asomething%0A%3C%2Fspan%3E)

To do…

#### Step 1: Override the icon shortcode

```plaintext
{{- with resources.Get (printf "icons/%s.svg" ($.Get 0)) -}}
  <span class="relative inline-block align-text-bottom icon">
    {{- strings.Replace .Content "\n" "" | safeHTML -}}
  </span>
{{- end -}}

```

In the above we remove newlines from the SVG file with `strings.Replace`, and we remove whitespace from the shortcode itself using the `{{-` and `-}}` action delimiters.

#### Step 2: Configure goldmark to treat HTML in Markdown as safe

In your site config:

```toml
[markup.goldmark.renderer]
unsafe = true

```

The configuration above is safe if _you_ control the content.

#### Example

```plaintext
git clone --single-branch -b hugo-forum-topic-55399 https://github.com/jmooring/hugo-testing hugo-forum-topic-55399
cd hugo-forum-topic-55399
hugo server

```

---

<div class="post-metadata">

**Author:** ![ZhenShuo2021](https://avatars.discourse-cdn.com/v4/letter/z/59ef9b/32.png) [@ZhenShuo2021](https://discourse.gohugo.io/u/ZhenShuo2021)\
**Post date:** [July 24, 2025, 9:02pm UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399/6 "2025-07-24T21:02:20Z")

</div>

Wow, thank you very much for your clear explanation. I was genuinely surprised to learn that the problem was just caused by a missing line break, and I didn’t expect it would turn into you helping me debug my setup. Truly appreciate your help and generosity.

---

<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:** [July 26, 2025, 9:02pm UTC](https://discourse.gohugo.io/t/tableofcontents-doesnt-render-headings-correctly-that-contains-shortcode/55399/7 "2025-07-26T21:02:30Z")

</div>

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