Code highlighting
The Relearn theme uses Hugo’s built-in syntax highlighting for code.
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.
```json
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
```
Renders to:
[
{
"title": "apples",
"count": [12000, 20000],
"description": {"text": "...", "sensitive": false}
},
{
"title": "oranges",
"count": [17500, null],
"description": {"text": "...", "sensitive": false}
}
]
Supported languages
Hugo comes with a remarkable list of supported languages.
Recommended configuration
You can choose a color theme from the list of supported themes and add it in your config.toml
[markup]
[markup.highlight]
# 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"