Markdown Render Hooks In Hugo

Recently i was fiddling with my blog’s theme, and wanted to see what it would look like if all the headings were in uppercase.

This site is powered by a static site generator Hugo. Hugo’s default Markdown renderer (Goldmark) supports Markdown render hooks, which can be used to override certain parts of the default Markdown rendering.

This is done by creating templates with a particular naming scheme in layouts/_default/_markup.

I modified the default renderer to use Hugo’s upper function to turn heading text to uppercase, and added a decorative rectangle for some visual flare:

<!╌ layouts/_default/_markup/render-heading ╌>
<h{{ .Level }}>{{ upper .Text | safeHTML }}</h{{ .Level }}>
{{ $decoLevels := (slice 1 2) }}
{{ if ( in $decoLevels .Level ) }}
  <div class="header-rect"></div>
{{ end }}

This template only modifies the Markdown renderer, so HTML layouts will not inherit these changes. If you want to extend this logic to the HTML layouts, use a partial:

{{ partial "header.html" (dict "Level" 1 "Text" "H1 header text here!") }}