{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreigptqewjhystk5nyozaepq5i6ehbspcyh2esschh6b74s7wtqoeoa",
    "uri": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/app.bsky.feed.post/3mnlsxsqzvv2d"
  },
  "canonicalUrl": "https://til.iainsimmons.com/posts/better-code-blocks-with-the-astro-expressive-code-integration",
  "description": "today iain learned: How to build better and more accessible code blocks with the Astro Expressive Code integration",
  "path": "/posts/better-code-blocks-with-the-astro-expressive-code-integration",
  "publishedAt": "2026-04-03T00:00:00.000Z",
  "site": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/site.standard.publication/3mnlsntqzp72a",
  "tags": [
    "webdev",
    "HTML",
    "CSS",
    "Astro",
    "accessibility",
    "a11y"
  ],
  "textContent": "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.\n\nI had also added my own little tweaks, including a <strong style=\"color: cyan\">cyan</strong>-coloured border and the language displayed in the top right in <strong style=\"color: gold\">gold</strong>. Here's the CSS for that:\n\nAnd that looked like this:\n![[attachments/old-code-block.png|Old code block styles]]\n\nThat's not bad, but one feature that I really felt was missing was the ability to copy the code from a code block.\n\nI 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.\n\nI 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.\n\nIt puts Astro first in its list of framework integrations, which was already a good sign!\n\nAnd it was of course super-easy to install:\n\nThen 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:\n\nAnd 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:\n\nAnd the result is ... well, you can see it in the code blocks on this post! 🙂",
  "title": "Better code blocks with the Astro Expressive Code integration"
}