I have been using Astro for a while now and I am really happy with how it turned out to be. But one thing that I was missing was the ability to customize the syntax highlighting theme.

I read on the Astro documentation that it uses Shiki for syntax highlighting. But the default config of shiki uses colors burnt into the inline styles of the span tags.

<pre
  class="shiki shiki-themes min-light nord"
  style="background-color:#ffffff;--shiki-dark-bg:#2e3440ff;"
  tabindex="0"
>
  <code>
    <span class="line">
      <span style="color:#1976D2;--shiki-dark:#D8DEE9">console</span>
      <span style="color:#6F42C1;--shiki-dark:#ECEFF4">.</span>
      <span style="color:#6F42C1;--shiki-dark:#88C0D0">log</span>
      <span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">(</span>
      <span style="color:#22863A;--shiki-dark:#ECEFF4">"</span>
      <span style="color:#22863A;--shiki-dark:#A3BE8C">hello</span>
      <span style="color:#22863A;--shiki-dark:#ECEFF4">"</span>
      <span style="color:#24292EFF;--shiki-dark:#D8DEE9FF">)</span>
      </span>
    </code>
</pre>

And I wanted to use my custom css variables for the syntax highlighting which can be toggled between light and dark themes.

So I started looking for a way to customize the shiki theme in Astro and I found a way to do it.

Steps

1. Go to astro.config.mjs file and add the following code to the file.

export default defineConfig({
+  markdown: {
+    shikiConfig:{
+      theme:'css-variables',
+    },
+  }
}),

2. Now write your normal code block in markdown file.

```js
console.log("Hello World");
```

which will be rendered as

<pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text);overflow-x:auto" tabindex="0" data-language="markdown">
    <code>
    <span class="line">
        <span style="color:var(--astro-code-token-string)">```js</span>
    </span>
    <span class="line">
        <span style="color:var(--astro-code-token-constant)">console</span>
        <span style="color:var(--astro-code-token-function)">.log</span><span style="color:var(--astro-code-color-text)">(</span>
        <span style="color:var(--astro-code-token-string-expression)">"Hello World"</span><span style="color:var(--astro-code-color-text)">);</span>
    </span>
    <span class="line">
        <span style="color:var(--astro-code-token-string)">```</span>
    </span>
    <span class="line"></span>
    </code>
</pre>

3. Now create a css file in your project and add the following code to the file. These are all the css variables that shiki uses to style the code blocks.

:root {
    --astro-code-color-background: var(--bg_h);
    --astro-code-color-text: var(--fg2);
    --astro-code-color-forground: var(--fg);
    --astro-code-token-link: var(--blue);
    --astro-code-token-string: var(--green);
    --astro-code-token-comment: var(--gray);
    --astro-code-token-constant: var(--yellow);
    --astro-code-token-keyword: var(--blue);
    --astro-code-token-parameter: var(--blue);
    --astro-code-token-function: var(--yellow);
    --astro-code-token-string-expression: var(--red);
    --astro-code-token-punctuation: var(--fg);
    --astro-code-token-inserted: var(--green);
    --astro-code-token-deleted: var(--red);
    --astro-code-token-changed: var(--yellow);
}

And that’s it. Now you can customize the shiki theme in Astro using css variables.

You can toggle between light and dark themes and see how the code blocks change their colors on this page.