syntax highlighting with shiki

07.06.2023

#syntax #syntaxhighlighting #astrojs #astro #shiki #md #markdown #mdx

1 min read

After what feels like forever, I finally managed to get syntax highlighting with Shiki in .mdx to work. It’s probably my fault for not figuring it out sooner, but then again I’d never used Shiki before.

What I was getting previously:

    const a = 2;
    const b = 3;

    const sum = () => a + b;

Here is what you need to do (if you’re anything at all like me!): you will need to append the language after the opening backticks. E.g. ```js (or whatever your language is)

const a = 2;
const b = 3;

const sum = () => a + b;

And now we have colors, nice and dandy.

Here’s the page that clued me in on how it works.