Astro Shiki Syntax Highlighting with CSS Variables
000000
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:
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.
astro-shiki-css-variables
This project is a showcase of Astro Shiki Syntax Highlighting with CSS Variables.
Introduction
MORE POSTS
-
Tailwind CSS Responsive Design Without Breakpoints
Solve bloated Tailwind CSS by implementing a fluid responsive design system via the power of CSS Clamp!
2 Min Read
-
Summarize Blog Posts with TypeScript and GPT
Implement basic web scraping and leverage OpenAI's GPT to summarize blog posts via TypeScript.
5 Min Read