Astro Shiki Syntax Highlighting with CSS Variables
TABLE OF CONTENTS
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.
To begin, let’s update our Astro configuration to use Shiki’s css-variables theme:
Make sure to have @astrojs/mdx installed first.
import mdx from '@astrojs/mdx';
export default defineConfig({
markdown: { shikiConfig: { theme: 'css-variables' } },
integrations: [mdx()],
});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.
This project is a showcase of Astro Shiki Syntax Highlighting with CSS Variables.
MORE POSTS
Solve bloated Tailwind CSS by implementing a fluid responsive design system via the power of CSS Clamp!
Implement basic web scraping and leverage OpenAI's GPT to summarize blog posts via TypeScript.