1 Min Read

Astro Shiki Syntax Highlighting with CSS Variables

Me

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:

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

CONTINUE READING

Check out some other software-related blog posts I've written.

Tailwind CSS

CSS

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

AI

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