hugo/docs/content/en/render-hooks/headings.md

title	linkTitle	description	categories	keywords
Heading render hooks	Headings	Create a heading render hook to override the rendering of Markdown headings to HTML.

Context

Heading render hook templates receive the following context:

Anchor

(string) The id attribute of the heading element.

Attributes

(map) The Markdown attributes, available if you configure your site as follows:

{{< code-toggle file=hugo >}} [markup.goldmark.parser.attribute] title = true {{< /code-toggle >}}

Level

(int) The heading level, 1 through 6.

Page

(page) A reference to the current page.

PageInner

{{< new-in 0.125.0 />}}

(page) A reference to a page nested via the RenderShortcodes method. See details.

PlainText

(string) The heading text as plain text.

Text

(template.HTML) The heading text.

Examples

In its default configuration, Hugo renders Markdown headings according to the CommonMark specification with the addition of automatic id attributes. To create a render hook that does the same thing:

<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{- .Text -}}
</h{{ .Level }}>

To add an anchor link to the right of each heading:

<h{{ .Level }} id="{{ .Anchor }}" {{- with .Attributes.class }} class="{{ . }}" {{- end }}>
  {{ .Text }}
  <a href="#{{ .Anchor }}">#</a>
</h{{ .Level }}>

{{% include "/_common/render-hooks/pageinner.md" %}}