How to Customize a Shiki Theme in Astro

I wanted to change the background color and the padding of the code blocks styled by Shiki in Astro. While the documentation does not explicitly detail how to do this, I discovered a method.

:: published on 2023-08-31

Astro offers a convenient integration for styling code blocks in Markdown files using Shiki. For this website, I opted for the github-light theme. However, I wanted to customize the background color and add some padding to the code blocks.

Changing the Background Color

To alter the background color, load the github-light.json file in your astro.config.mjs and override the existing background color setting:

import {defineConfig} from 'astro/config'
import githubLightTheme from 'shiki/themes/github-light.json'

const theme = {
  ...githubLightTheme,
  colors: {
    ...githubLightTheme.colors,
    'editor.background': '#efefef'
  }
}

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

You can find all the relevant properties within the Shiki source files of the themes, for example, github-light.json

Styling ‘pre’ Elements

To adjust the padding of the code blocks, add CSS rules specifically for the pre element:

pre {
    padding: 1ch;
}