1 Min Read
Astro Shiki Syntax Highlighting with CSS Variables
CHRISTIAN PENROD
Front-End Web Developer
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:
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:
<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
