mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-10-27 18:53:18 +00:00
5c667b3d07
Since a while, Hugo has its own mechanism for code highlightning. We remove the old highlightning code provided by the client-side javascript library highlight.js and all its related files. This also solves issues introduced by Hugos own highlightning because in our theme we are currently highlighting the code twice leading to unpredictiable results. This will also fix an issue were light code highlightning themes weren't displayed correctly because our styles are overwriting color information. Another advantage is the huge list of supported languages which by far exceeds our current list. On the downside, this is a breaking change because our current color theme isn't supported by Hugo.
61 lines
1.3 KiB
Markdown
61 lines
1.3 KiB
Markdown
---
|
|
date: 2020-06-01T13:31:12+01:00
|
|
title: Code highlighting
|
|
weight: 16
|
|
---
|
|
|
|
Relearn theme uses [Hugos build in syntax highlighting](https://gohugo.io/content-management/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.
|
|
|
|
<!-- markdownlint-disable MD046 -->
|
|
````plaintext
|
|
```json
|
|
[
|
|
{
|
|
"title": "apples",
|
|
"count": [12000, 20000],
|
|
"description": {"text": "...", "sensitive": false}
|
|
},
|
|
{
|
|
"title": "oranges",
|
|
"count": [17500, null],
|
|
"description": {"text": "...", "sensitive": false}
|
|
}
|
|
]
|
|
```
|
|
````
|
|
<!-- 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
|
|
|
|
Hugo comes with a [remarkable list](https://gohugo.io/content-management/syntax-highlighting/) of supported languages.
|
|
|
|
## Configuration
|
|
|
|
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`
|
|
|
|
````toml
|
|
[markup]
|
|
[markup.highlight]
|
|
style = "monokai"
|
|
````
|