hugo-theme-relearn/exampleSite/content/cont/syntaxhighlight.en.md
Sören Weber c108d677b4 Rebranding to new theme name
- Rename theme from "Learn" to "Relearn"
- also change URLs
- remove old references
- more removal of french and chinese
2021-06-30 14:56:06 +02:00

2.7 KiB

date title weight
2020-06-01T13:31:12+01:00 Code highlighting 16

Relearn theme uses highlight.js to provide code syntax highlighting.

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

Relearn 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.

Identifying failed language detection

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

Supporting additional languages

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.

Download custom highlight.js

Visit https://highlightjs.org/download/ and select your desired language support. Note that more languages means greater package size.

Add custom highlight.js to static resources

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-relearn/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.

Further usage information

See https://highlightjs.org/usage/