I Found Rehype Expressive Code for Astro

Context or Problem

This is a little bit funny, again.

When I decide to not use Shiki because I want similar looks for codeblock in my journal website that’s why I moved and use rehype-pretty-code and modify css things.

But now I just randomly search “expressive code astro” and it actually already there used by Astro Starlight package for long time.

Maybe I should give it a try. Dunno if it’s will really as what I expected like I don’t want to refactor my silly codebase to use other dependencies without gaining more values.

Experiment

So I will give it a try first maybe in new fresh Astro JS install not in to my existing codebase it just well full of spagethi code that makes me afraid to touch it again.

Oh their official docs is in https://expressive-code.com/

Anyways let’s try it while I also opening other VSCode instance for that test project.

Alright so I am in this new fresh Astro project now.

To install expressive-code in Astro just run this command

npx astro add astro-expressive-code{:sh}

And I got this warning, that makes me wondering why this package is not in official Astro JS package? but it is used in Astro Starlight project? Anyways it just a warning so I will just continue.

⚠ astro-expressive-code is not an official Astro package.

Next I will need to also add astro/mdx integrations.

npx astro add mdx{:sh}

It was mind blowing, it really that one used in Astro docs! also with copy code button already available on the top right. Below is my screenshot.

Alright, now I am curious about using my favorite theme. Fortunately they have official docs https://expressive-code.com/guides/themes/ about it so I can do it ASAP.

// @ts-check
import { defineConfig } from "astro/config";
import expressiveCode, { ExpressiveCodeTheme } from "astro-expressive-code";
import mdx from "@astrojs/mdx";

// @ts-ignore, this is always complaining IDK why
import fs from "node:fs";

// Load your saved theme JSONC file here and create a theme from it
const jsoncString = fs.readFileSync(
  new URL(`./beautiful-dracula.json`, import.meta.url),
  "utf-8"
);
const beautifulDracula = ExpressiveCodeTheme.fromJSONString(jsoncString);

// https://astro.build/config
export default defineConfig({
  integrations: [
    expressiveCode({
      themes: [beautifulDracula],
    }),
    mdx(),
  ],
});

And it works! it even have Mac like terminal frame https://expressive-code.com/key-features/frames/ there is lot of feature that I couldn’t write in here because I am too lazy. Better you see and read it alone.

The best thing about Expressive Code is it just works no need to add or tweak my CSS. It also have it’s own highlight, git style diff for delete or inserted line and much more https://expressive-code.com/key-features/text-markers/ .

Also they have <Code>{:html} component that really help me to be honest.

https://expressive-code.com/key-features/code-component/

Outcome

It works! no CSS tweaks and have terminal frame if you like it.

Mindblowing crazy.

Possible Next Steps

High Priority

Move to use Expressive Code in this website.

Low Priority

Try to use collapsible plugin https://expressive-code.com/plugins/collapsible-sections/

Try to use line number plugin https://expressive-code.com/plugins/line-numbers/

I think that’s enough for now. But the Twolash community plugin https://twoslash.matthiesen.dev/ looks more crazy haha.

References

• https://docs.astro.build/en/guides/integrations-guide/mdx/
• https://expressive-code.com/key-features/syntax-highlighting/
• https://stackoverflow.com/questions/41604263/how-do-i-display-local-image-in-markdown