Search code examples
ryamlpandocquarto

Custom syntax highlighting for light and dark mode Quarto

I am trying to use different syntax highlighting for light and dark mode in Quarto, per the documentation here. However, I cannot get this documented method to work.

Here's an example. My regular file looks like this, with one highlight style for light and dark.

---
title: "Example"
format:
    html:
        theme:
            light: flatly
            dark: darkly
highlight-style: github
eval: false
---

```{r}
# Trivial code
library(tidyverse)

mtcars <- mtcars |>
    group_by(mpg) |>
    distinct() |>
    ungroup() |>
    mutate(id = row_number())
```

Per the documentation, I should be able to add different highlight styles for light and dark. I tried two options, both of which just removed all syntax highlighting from both light and dark modes.

First, I tried:

---
title: "Example"
format:
    html:
        theme:
            light: flatly
            dark: darkly
highlight-style: 
    light: github
    dark: atom-one
eval: false
---

```{r}
# Trivial code
library(tidyverse)

mtcars <- mtcars |>
    group_by(mpg) |>
    distinct() |>
    ungroup() |>
    mutate(id = row_number())
```

Next, I tried:

---
title: "Example"
format:
    html:
        theme:
            light: flatly
            dark: darkly
        highlight-style:
            light: github
            dark: atom-one
eval: false
---

```{r}
# Trivial code
library(tidyverse)

mtcars <- mtcars |>
    group_by(mpg) |>
    distinct() |>
    ungroup() |>
    mutate(id = row_number())
```

Both of these options, attempting to follow the documentation, just remove all code highlighting. Does anyone know how to properly use two different code highlighting themes for light and dark mode in Quarto? I am using the newest version of Quarto, v1.4.549, on Mac OS Sonoma.

Solution

  • As far as I'm aware you can't mix-and-match the highlight-style for light and dark unless you import .theme files (which is the example in the documentation).

    One option is to use a single highlighting theme which has both light and dark variants, e.g. highlight-style: atom-one will automatically switch between atom-one-light and atom-one-dark.

    Otherwise you can download different light and dark theme files from the quarto cli Github page, save them locally to .theme files in the same directory and then use:

    highlight-style: 
  light: testlight.theme
  dark: testdark.theme

    Example output with oblivion for the light theme and espresso for the dark theme (Windows OS): Light output Dark output