# 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"