Copy button for Code Blocks #461
Comments
|
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 withastro/astro#7943 — to get this working well. |
Since the withastro/astro#7943 has been merged, the Copy button is on way to be implemented? |
|
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 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. |
|
It is interesting and I thank you for your work! Could you please link the PR you are working on? |
|
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 |
|
how configure copy code button in code block .give some example |
|
@hippotastic |
|
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 |
|
@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 |
|
Thank you for the kind words, everyone! I'm glad that you enjoy Expressive Code as much as I enjoy working on it! :) |
|
Hello mates ^^ Any news about this feature? |
Lots of news indeed, you can follow the progress in this pull request or read the latest update in this message 👍 |
|
Thank you for this ticket. Is there a sample code to use this new feature in mdx files? |
This will automatically works out of the box for all MD and MDX files when using the code block syntax. |
|
Do we need only to update Astro Starlight to the latest version to have this feature available? |
It's available since version |
|
Yes, you should only need to update Starlight (how to update). |
What version of
starlightare you using?0.6.1
What is your idea?
Add a
copybutton 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
The text was updated successfully, but these errors were encountered: