Syntax Color with Shiki in Astro

I was looking for a way to change the background color of the code excerpts on my blog in dark mode, because the default background did not contrast well enough with the background color I choose for my dark theme. After some Googling, redditing and attempting to hack into the CSS, it turned out that everything is documented right under your nose, if you RTFM.

Syntax Highlighting in Astro

Astro supports in fact two syntax highlighting packages: Shiki (the default) and Prism. Between the two, Shiki seems the easier one to adopt. Shiki is highly configurable, and you can declare your customizations in the markdown section of Astro’s defineConfig in astro.config.ts. For example, here’s how you can change the default syntax highlighting theme:

// File: astro.config.ts
export default defineConfig({
  markdown: {
    shikiConfig: { 
      /* Add other Shiki configuration here */
      theme: 'github-dark-default',
    },
  },
})

Other possible configuration options are well documented on the Astro pages.

Themes and Languages

The list of available themes and languages is impressive and is fully documented on the Shiki pages, where you can easily select a combination of a language and theme to generate previews and find the ones you like:

• List of themes
• List of languages

Examples

Here are a few examples to wrap it up:

// Swift
class HighLighter {
    let theme = "github-dark-default"
    func printTheme() {
        print("The theme is \(theme)")
    }
}

// C++
#include <iostream>
#include <string>

using namespace std;

int main() {
  const string theme = "github-dark-default";
  cout << "the theme is " << theme << endl;
  return 0;
}