How to Use CSS variables to style highlighting text with Shiki and Astrojs

Introduction

Shiki is a powerful syntax highlighting library that can be integrated into Astro.js projects. In this blog post, we’ll explore how to style Shiki using CSS variables within an Astro.js project. CSS variables offer a convenient way to manage and customize the appearance of Shiki syntax highlighting. Let’s get started!

Setting Up an Astro.js Project

Before we dive into the specifics of styling Shiki, let’s assume you have already set up an Astro.js project and have Shiki installed as a dependency and also MDX if you want to style your markdown snippets. If you haven’t, you can follow the

• Astro.js documentation to get started
• Get Shiki
• Install MDX

Defining CSS Variables

To start styling Shiki, lets define CSS variables that will control the appearance of the syntax highlighting. Open your CSS file (e.g., global.css) and add the following code:

:root {
  --astro-code-color-text: #000000;
  --astro-code-color-background: #ffffff;
  --astro-code-token-constant: #00000080;
  --astro-code-token-string: #00000050;
  --astro-code-token-comment: #00000060;
  --astro-code-token-keyword: black;
  --astro-code-token-parameter: #ffffff;
  --astro-code-token-function: black;
  --astro-code-token-string-expression: #fe351b;
  --astro-code-token-punctuation: #ffffff;
  --astro-code-token-link: #ffffff;
}

In this example, we’ve defined CSS variables for the background color, text color, comment color, keyword color, string color, variable color, and function color. Feel free to customize these variables according to your project’s design.

Applying CSS Variables to Shiki

To apply the CSS variables to Shiki syntax highlighting, you’ll need to state it on the astro.config.mjs file. Shiki is Astro’s syntax highlighter. You can configure all options via the shikiConfig object like so:

shikiConfig: {
  theme: "css-variables";
}

Let’s start styling the code within your HTML

<Code code={`your code goes here`} lang="#" theme="css-variables" />

In this example, we are giving the code tag the theme atribute, like this:

• theme="css-variables"

This is where you would have stated the theme you wanted to use when using a premade theme.

To style the code within your markdown

to style the code within your markdown you will have to wrap the shikiConfig{} object withing the markdown{} object

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
export default defineConfig({
  //this is the block you need to style it on markdown
  markdown: {
    shikiConfig: { theme: "css-variables" },
  },
  shikiConfig: {
    wrap: true,
    skipInline: false,
  },
  site: "https://lexingtonthemes.com/",
  integrations: [mdx({})],
});

Conclusion

In this blog post, we explored how to style Shiki syntax highlighting using CSS variables within an Astro.js project. We began by setting up an Astro.js project and ensuring that Shiki was installed as a dependency. Then, we defined CSS variables in the global.css file to control the appearance of the syntax highlighting. These variables included colors for text, background, constants, strings, comments, keywords, parameters, functions, string expressions, punctuation, and links. We encouraged customization of these variables to match the project’s design.

Next, we applied the CSS variables to Shiki by specifying the theme as “css-variables” in the astro.config.mjs file. This configuration allowed us to style the code within HTML using the tag and the theme=“css-variables” attribute. Additionally, to style the code within markdown, we wrapped the shikiConfig object within the markdown object in the Astro.js configuration.

By following these steps, developers can easily style Shiki syntax highlighting in Astro.js projects using CSS variables. This flexibility empowers them to customize the appearance of their code snippets according to their project’s design requirements.

/Michael Andreuzza