Learn theme uses highlight.js to provide code syntax highlighting.
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}
}
]
Learn theme ships with its own version of highlight.js to support offline browsing. The included package supports 38 common languages, as described on the highlight.js download page.
Highlight will write a warning to the browser console if a requested language was not found. For example, the following code block references an imaginary language foo. An error will be output to the console on this page.
```foo
bar
```
Could not find the language 'foo', did you forget to load/include a language module?(anonymous) @ highlight.pack.js
To support languages other than the 38 common languages included in the default highlight.js you will need to download your own version of highlight.js and add it to your site content.
Visit https://highlightjs.org/download/ and select your desired language support. Note that more languages means greater package size.
Inside the zip archive downloaded from highlight.js extract the file named highlight.pack.js. Move this file to the new location
static/js/highlight.pack.js
Do not replace the existing file at themes/hugo-theme-learn/static/js/highlight.pack.js.
Including the file in the correct path will override the theme default highlight.pack.js and prevent issues caused in the future if the theme default file is updated.