Astro Shiki Syntax Highlighting with CSS Variables
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
Make sure to have @astrojs/mdx installed first.
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:
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.
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.