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].