Heading render hooks

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:

hugo.

markup:
  goldmark:
    parser:
      attribute:
        title: true

[markup]
  [markup.goldmark]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        title = true

{
   "markup": {
      "goldmark": {
         "parser": {
            "attribute": {
               "title": true
            }
         }
      }
   }
}

Level #

(int) The heading level, 1 through 6.

Page #

(page) A reference to the current page.

PageInner #

(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:

layouts/_default/_markup/render-heading.html

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

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

layouts/_default/_markup/render-heading.html

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