Astro Shiki Syntax Highlighting with CSS Variables

1 Min Read

By default, Astro uses Shiki for syntax highlighting markdown code blocks. Astro comes with an array of Shiki themes by default. However, let’s learn how to make our own using CSS Variables.

Configuring Astro

To begin, let’s update our Astro configuration to use Shiki’s css-variables theme:

astro.config.mjs 
 import mdx from '@astrojs/mdx';
 
export default defineConfig({
  markdown: { shikiConfig: { theme: 'css-variables' } },
  integrations: [mdx()],
});

Adding CSS Variables

Within Astro’s source code , there’s a remark-shiki integration that defines a set of CSS Variables. Taking note of these variables, we can now override them with our own:

Layout.astro 
 <style is:global>
  :root {
    --astro-code-color-text: azure;
    --astro-code-color-background: black;
    --astro-code-token-constant: plum;
    --astro-code-token-string: orchid;
    --astro-code-token-comment: salmon;
    --astro-code-token-keyword: powderblue;
    --astro-code-token-parameter: seashell;
    --astro-code-token-function: dodgerblue;
    --astro-code-token-string-expression: burlywood;
    --astro-code-token-punctuation: linen;
    --astro-code-token-link: honeydew;
  }
</style>

And that’s it! All code block syntax highlighting will now use our CSS Variables.

astro-shiki-css-variables

This project is a showcase of Astro Shiki Syntax Highlighting with CSS Variables.

Astro
3
0

Introduction

MORE POSTS