Highlight

Highlight


Insert syntax-highlighted code into your content using the highlight shortcode.

The highlight shortcode calls the [transform.Highlight] function which uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].

Arguments #

The highlight shortcode takes three arguments.

{{< highlight LANG OPTIONS >}}
CODE
{{< /highlight >}}
CODE
(string) The code to highlight.
LANG
(string) The language of the code to highlight. Choose from one of the [supported languages]. This value is case-insensitive.
OPTIONS
(string) Zero or more space-separated key-value pairs wrapped in quotation marks. Set default values for each option in your [site configuration]. The key names are case-insensitive.

Example #

{{< highlight go "linenos=inline, hl_Lines=3 6-8, style=emacs" >}}
package main

import "fmt"

func main() {
    for i := 0; i < 3; i++ {
        fmt.Println("Value of i:", i)
    }
}
{{< /highlight >}}

Hugo renders this to:

1package main
2
3import "fmt"
4
5func main() {
6    for i := 0; i < 3; i++ {
7            fmt.Println("Value of i:", i)
8    }
9}

You can also use the highlight shortcode for inline code snippets:

This is some {{< highlight go "hl_inline=true" >}}fmt.Println("inline"){{< /highlight >}} code.

Hugo renders this to:

This is some fmt.Println("inline") code.

Given the verbosity of the example above, if you need to frequently highlight inline code snippets, create your own shortcode using a shorter name with preset options.

layouts/shortcodes/hl.html
{{ $code := .Inner | strings.TrimSpace }}
{{ $lang := or (.Get 0) "go"  }}
{{ $opts := dict "hl_inline" true "noClasses" true }}
{{ transform.Highlight $code $lang $opts }}
This is some {{< hl >}}fmt.Println("inline"){{< /hl >}} code.

Hugo renders this to:

This is some code.

Options #

Pass the options when calling the shortcode. You can set their default values in your [site configuration].