Syntax highlighting

Basic Example

As always, we can embed code into .md and .mdx files by using code fences (```).

```
sudo apt update
```

The code above renders to:

sudo apt update

Notice that, thanks to some post-processing and styling by Nordlys, the code block also has a header. Clicking on the icon in the header copies the embedded code to the clipboard.

Setting the Code Language

Nordlys can also render an icon that matches the code-language in the header. When adding javascript as the code language after the first backticks(```), the code block will have JavaScript syntax highlighting and display a small icon in the header.

```javascript
const sortedArray = [3, 1, 2].toSorted()
```

The code above renders to:

const sortedArray = [3, 1, 2].toSorted()

If the code language is not specified or if a language that is not yet supported is used, the icon will be displayed, as seen in the basic example.

Adding a Label

We can also display a custom label in the code header, such as the name of a file containing our embedded code. To achieve this, we add a label after the code language, following the backticks. This means we need to specify the language to render a label.

```python scripts/sorting.py
sortedList = sorted([3, 1, 2])
```

The code above renders to:

sortedList = sorted([3, 1, 2])

Changing Color Scheme

It is also possible to change the colors of the code blocks, by changing the shikiThemes in theme.config.ts. For a list of avaible themes, refer to the Shiki documentation.

export default defineThemeConfig({
  shikiThemes: {
    light: 'vitesse-light',
    dark: 'vitesse-black'
  }
  // ... other settings
})