Astro Syntax Highlighting with Custom VS Code Theme

💅🏻 Beautify Your Astro Blog With Your Favorite VS Code Theme Using Shiki

Have you ever gazed at the syntax highlighting of your code blocks on your website and thought, “You’re cool but not homey?” Well, let’s make your code feel at home inside your Astro project! The beauty of Astro is that it pairs perfectly with Shiki for syntax highlighting, and guess what? Shiki can cozy up with any VS Code theme. Intrigued? Let’s get started.

👰🏻‍♂️ Why Marry Your Website and Syntax Theme?

Now, you might ask, “Why bother?” But aesthetic consistency is more than just eye candy. A matching syntax theme integrates smoothly with your site, offering a more unified, professional look. It’s like your code blocks were always meant to be there, elegantly accenting your website’s ambiance.

🐶 Astro’s Loyal Companion: Shiki

Astro defaults to using Shiki for syntax highlighting. Not only is Shiki excellent at its job, but it also lets you choose from a smorgasbord of VS Code themes. Most of these themes are readily available on GitHub.

Check Out Shiki on GitHub

🔦 Finding the Perfect Theme

Your first mission is to scout the GitHub realm for your desired theme. For the sake of this tutorial, I’ll be working with the City Lights theme, a sleek dark theme that makes my code sing.

Find City Lights Theme Here

🪴 Bringing Home the Theme

After you’ve located your theme, download the .json file associated with it. Typically, you’ll find this treasure buried in the /themes folder of the repository. Go ahead and download it to your project. I prefer to keep it at the root and name it city-lights.json.

🔆 Astro Meets City Lights

Finally, we need to configure Astro to adopt this new aesthetic for its code blocks. To do so, head over to your astro.config.mjs and pull in the theme:

// astro.config.mjs
import { defineConfig } from "astro/config";
import cityLights from "./city-lights.json";

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: {
        name: "city-lights",
        type: "dark",
        settings: cityLights.tokenColors,
      }
    }
  }
});

This bit of code is like the engagement ring of your Astro project to the City Lights theme. It merges them in aesthetic harmony. Your code blocks will now not only look exquisite but also feel at home on your website.

⛳ Summing Up

That’s it! With just a few steps, you’ve achieved aesthetic consistency between your Astro project and your code blocks. Your code is now a first-class citizen, enjoying the same visual comfort as the rest of your website. Isn’t it marvelous when everything matches?