1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
---
title: Syntax highlighting styles
description: Highlight code examples using one of these styles.
categories: []
keywords: [highlight]
---
## Overview
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](g)
- Use [fenced code blocks] with the Markdown content format
Regardless of method, use any of the syntax highlighting styles below.
Set the default syntax highlighting style in your project configuration:
{{< code-toggle file=hugo >}}
[markup.highlight]
style = 'monokai'
{{< /code-toggle >}}
See [configure Markup](/configuration/markup/#highlight).
[`transform.Highlight`]: /functions/transform/highlight/
[`highlight`]: /shortcodes/highlight/
[fenced code blocks]: /content-management/syntax-highlighting/#fenced-code-blocks
## Styles
This gallery demonstrates the application of each syntax highlighting style with code examples written in different programming languages.
{{% syntax-highlighting-styles %}}
|
