How to add a custom theme for syntax highlighting with Astro and Shiki

Out-of-the-box, Astro comes with syntax highlighting for Markdown code blocks. This is such a breath of fresh air when you just want to hit the ground running. Astro uses Shiki by default or lets you choose Prism.

I’ve written custom Prism themes before (rigel theme), and previous iterations of this blog used Prism to highlight the code blocks.

However, I am drawn to Shiki as it lets you use any of the innumerable vscode themes.

Find your theme

In this example, we will use the amazing catppuccin mocha theme. The vscode JSON can be found here. Now copy and paste the JSON into a file in your Astro project.

Or you could fetch it with curl:

curl https://github.com/catppuccin/vscode/blob/compiled/mocha.json -o syntax-theme.json

Configure Astro

Open your astro.config.mjs and add your theme to the markdown config:

// Import your json theme
import syntaxTheme from './syntax-theme.json'

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: syntaxTheme,
    },
  },
})

You might need to restart your dev server, but then that’s it 🚀!

Tweak the theme

Another benefit of this approach is that you can tweak the syntax theme to more closely match your site’s theme. For example, you can change the background color of the code block:

- "editor.background": "#1e1e2e",
+ "editor.background": "#0E0E10",