2021-08-25 11:33:29 +00:00
+++
title = "Code highlighting"
weight = 16
+++
2020-06-01 13:59:45 +00:00
2021-09-11 13:46:14 +00:00
The Relearn theme uses [Hugo's built-in syntax highlighting ](https://gohugo.io/content-management/syntax-highlighting/ ) for code.
2020-06-01 13:59:45 +00:00
## Markdown syntax
Wrap the code block with three backticks and the name of the language. Highlight will try to auto detect the language if one is not provided.
<!-- markdownlint - disable MD046 -->
2021-07-25 23:05:46 +00:00
````plaintext
```json
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
2020-06-01 13:59:45 +00:00
```
2021-07-25 23:05:46 +00:00
````
2020-06-01 13:59:45 +00:00
<!-- markdownlint - disable MD046 -->
Renders to:
```json
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
```
## Supported languages
2021-08-23 22:46:53 +00:00
Hugo comes with a [remarkable list ](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages ) of supported languages.
2020-06-01 13:59:45 +00:00
2021-09-23 19:46:32 +00:00
## Recommended configuration
2020-06-01 13:59:45 +00:00
2021-07-25 23:05:46 +00:00
You can choose a color theme from the [list of supported themes ](https://xyproto.github.io/splash/docs/all.html ) and add it in your `config.toml`
2020-06-01 13:59:45 +00:00
2021-07-25 23:05:46 +00:00
````toml
[markup]
[markup.highlight]
2022-02-10 23:59:40 +00:00
# if set to `guessSyntax = true` , there will be no unstyled code even if no language
# was given BUT mermaid code fences will not work anymore! So this is a mandatory
# setting for your site
guessSyntax = false
# choose a color theme or create your own
style = "base16-snazzy"
2021-07-25 23:05:46 +00:00
````
