hugo/docs/content/en/content-management/syntax-highlighting.md

title	description	categories	keywords	aliases
Syntax highlighting	Add syntax highlighting to code examples.		highlight	/extras/highlighting/ /extras/highlight/ /tools/syntax-highlighting/

Hugo provides several methods to add syntax highlighting to code examples:

• Use the transform.Highlight function within your templates
• Use the highlight shortcode with any content format
• Use fenced code blocks with the Markdown content format

Fenced code blocks

In its default configuration, Hugo highlights code examples within fenced code blocks, following this form:

```LANG [OPTIONS]
CODE
```

CODE

The code to highlight.

LANG

The language of the code to highlight. Choose from one of the supported languages. This value is case-insensitive.

OPTIONS

One or more space-separated or comma-separated key-value pairs wrapped in braces. Set default values for each option in your site configuration. The key names are case-insensitive.

For example, with this Markdown:

```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)
    }
}
```

Hugo renders this:

package main

import "fmt"

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

Options

{{% include "_common/syntax-highlighting-options.md" %}}

Escaping

When documenting shortcode usage, escape the tag delimiters:

```text {linenos=inline}
{{</*/* shortcode-1 */*/>}}

{{%/*/* shortcode-2 */*/%}}
```

Hugo renders this to:

{{</* shortcode-1 */>}}

{{%/* shortcode-2 */%}}

Languages

These are the supported languages. Use one of the identifiers, not the language name, when specifying a language for:

• The transform.Highlight function
• The highlight shortcode
• Fenced code blocks

{{< chroma-lexers >}}