Code themes

Code blocks are highlighted in one theme in light mode and another in dark mode, switching with the site. styles.codeblocks picks them:

{
  "styles": {
    "codeblocks": {
      "light": "one-light",
      "dark": "one-dark-pro"
    }
  }
}

Set only one of light and dark to change just that theme. The themes also color the code in the API reference’s examples and Try it playground.

Themes

Any of these works in either mode, though each is made for a light or a dark background.

Light themes: github-light, github-light-default, github-light-high-contrast, one-light, light-plus, min-light, slack-ochin, solarized-light, vitesse-light, material-theme-lighter, catppuccin-latte, rose-pine-dawn, night-owl-light, ayu-light, everforest-light, gruvbox-light-hard, gruvbox-light-medium, gruvbox-light-soft, kanagawa-lotus, horizon-bright, snazzy-light.

Dark themes: github-dark, github-dark-default, github-dark-dimmed, github-dark-high-contrast, one-dark-pro, dark-plus, min-dark, slack-dark, solarized-dark, vitesse-dark, vitesse-black, material-theme, material-theme-darker, material-theme-ocean, material-theme-palenight, catppuccin-frappe, catppuccin-macchiato, catppuccin-mocha, rose-pine, rose-pine-moon, night-owl, ayu-dark, ayu-mirage, everforest-dark, gruvbox-dark-hard, gruvbox-dark-medium, gruvbox-dark-soft, kanagawa-dragon, kanagawa-wave, dracula, dracula-soft, monokai, nord, tokyo-night, synthwave-84, poimandres, houston, laserwave, andromeeda, aurora-x, horizon, plastic, red, vesper.

Write the name exactly as it’s listed here: a name that isn’t on the list stops the site from building, with a message naming it.

Highlighting a language as another

A code block’s language - ```python - picks how it’s highlighted. langAlias highlights a language as another one: for a language without highlighting of its own, or a short name you’d rather write.

{
  "styles": {
    "codeblocks": {
      "langAlias": {
        "conf": "ini",
        "pseudocode": "python"
      }
    }
  }
}

```mdx blocks are highlighted as JSX, so the components in them are colored. Your langAlias entries are added to that one.

See Code blocks for titles, line highlighting, diffs and the rest.