Better code blocks with the Astro Expressive Code integration

Prior to this week I was using the default Shiki integration that comes out of the box with Astro, for syntax highlighting and styling code blocks in Markdown files. I had also added my own little tweaks, including a cyan-coloured border and the language displayed in the top right in gold. Here's the CSS for that: And that looked like this: ![[attachments/old-code-block.png|Old code block styles]] That's not bad, but one feature that I really felt was missing was the ability to copy the code from a code block. I was inspired/moved by Salma Alam-Naylor's experience having to write code and operate a web browser with only her voice, and how the simple thing of being able to copy the contents of a code block with one "click" made such a huge difference to her when she was temporarily disabled. I thought of building one myself, but as with many things in the Astro ecosystem, I assumed someone had already built a better solution. A quick search of the integrations led me to Expressive Code. It puts Astro first in its list of framework integrations, which was already a good sign! And it was of course super-easy to install: Then I just configured it with some slight modifications to the default options, picking my go-to theme of Tokyo Night and matching the font used on this site, JetBrains Mono: And lastly I further tweaked the CSS so any older code block styles were removed and did not conflict. The main part being to unset some other CSS added by the Astro Modular template I'm using: And the result is ... well, you can see it in the code blocks on this post! 🙂