starlight: Copy button for Code Blocks
What version of starlight are you using?
0.6.1
What is your idea?
Add a copy button to code blocks so people can easily copy-paste example code.
Already a thread in Discord on this but figured it would be nice to turn it into an issue (for selfish reasons so I can track it downstream 😅): https://discord.com/channels/830184174198718474/1070481941863878697/1120347723128909914
Why is this feature necessary?
Make it easier for developers to follow code examples
Do you have examples of this feature in other projects?
The amazing Astro Docs: https://docs.astro.build/en/getting-started/#start-your-first-project
Participation
- I am willing to submit a pull request for this issue.
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 9
- Comments: 18 (17 by maintainers)
Thank you for the kind words, everyone! I’m glad that you enjoy Expressive Code as much as I enjoy working on it! 😃
Our intention is to do this (and more!) via https://github.com/expressive-code/expressive-code
@hippotastic has been waiting on an Astro bug fix — hopefully happening as we speak in https://github.com/withastro/astro/pull/7943 — to get this working well.
Yes, it is! I’m currently working on a PR to properly integrate Expressive Code into Starlight. You should be already able to use it yourself right now by installing
astro-expressive-codeand adding it to your integrations list before MDX/Starlight.My PR is taking a bit because I’m currently traveling, and more importantly, I want to provide the best possible integration experience. For example, I also want to ensure the syntax highlighting & frame themes match your chosen Starlight site theme in both dark & light modes by default, and that any i18n strings are passed through properly.
I’m pretty far with my development! The toughest challenge was integrating Starlight’s dynamic theming using CSS variables, because I wanted to make sure you can use these configuration options without the default code blocks looking out of place. This is done now. 😃
The last challenge is how to connect Starlight’s i18n dictionary to Expressive Code, but I’ll probably just implement a quick adapter workaround to make this work and refine this in later releases.
My current ETA for the PR is in 3 days, and I’d expect some more days then to react to reviews before merging.
If you need it earlier and can live without the dynamic theming and i18n integration, installing
astro-expressive-codeyourself (e.g throughastro add) and moving its entry in the Astro config’sintegrationsarray in front of Starlight & MDX is all you need to do. 😃It’s not published yet, sorry about that! I’m used to only creating a PR when I’m done on my end. It wouldn’t help you either, as I’m currently experimenting to find the best way to integrate the oklab/oklch color spaces into my core package with minimal impact on the bundle size. 😃
Currently looking at
culori/fnbecause it’s already being used in Starlight.Yes, you should only need to update Starlight (how to update).
It’s available since version
0.13@hippotastic WOW! Great work, dude. I’m very patient so 1 week is kinda nothing for me. That means, take your time because we all appreciate your work later even more! Thank you so much for implementing this!
@hippotastic if you need more days to refine it completely, don’t worry, do that. I think we can wait in order to have a refined and completed solution. Thank you for your job!
@hippotastic Do you know an ETA until implemented? Or do you recommend installing
astro-expressive-codeby ourselves for now?