DEV Community

Luiz Américo
Luiz Américo

Posted on • Originally published at blikblum.dev on

Adding copy code feature to code blocks in Astro

I was looking for a way to add a copy code feature to code blocks in my blog, built with Astro. A google search led me to a few articles. The first four suggested home made solutions. The fifth was not exactly an article on how to add the feature but a Astro development discussion that quoted, in passing, the package used by Starlight.

That's it, to add a copy code feature to your code blocks in Astro, just install astro-expressive-code:

yarn astro add astro-expressive-code

# or

npx astro add astro-expressive-code

Enter fullscreen mode Exit fullscreen mode

Besides code copying, the package also provides other features.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay