I recently learned that you can highlight Hugo template code blocks by specifying go-html-template after the opening backticks.

So the opening backticks in a Markdown file look like this:

Text
```go-html-template

It makes a huge difference when highlighting Hugo template code blocks. I was previously using html for syntax highlighting and it wasn’t as good.

For example, here is some HTML + Hugo templating stuff being highlighted with html:

HTML
{{- define "main" }}

{{- if .Title }}
<header class="page-header">
    <h1>{{ .Title }}</h1>
    {{- if .Description }}
    <div class="post-description">
        {{ .Description }}
    </div>
    {{- end }}
</header>
{{- end }}

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }}<sup> {{ $count }}</sup></a>
    </li>
    {{- end }}
    {{- end }}
</ul>

{{- end }}{{/* end main */ -}}

Here’s the same code block but with go-html-template specified:

Go HTML
{{- define "main" }}

{{- if .Title }}
<header class="page-header">
    <h1>{{ .Title }}</h1>
    {{- if .Description }}
    <div class="post-description">
        {{ .Description }}
    </div>
    {{- end }}
</header>
{{- end }}

<ul class="terms-tags">
    {{- $type := .Type }}
    {{- range $key, $value := .Data.Terms.Alphabetical }}
    {{- $name := .Name }}
    {{- $count := .Count }}
    {{- with site.GetPage (printf "/%s/%s" $type $name) }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }}<sup> {{ $count }}</sup></a>
    </li>
    {{- end }}
    {{- end }}
</ul>

{{- end }}{{/* end main */ -}}

Big difference!

Note that I’m using Chroma for syntax highlighting so your experience may vary, but Chroma comes by default with Hugo.

References