docs: how to add "Copy" button to code blocks #1047
Conversation
Guide on how to add "Copy" to clipboard buttons on code blocks in Docusaurus.
aenuros
changed the title
|
Deploy preview for docusaurus-preview ready! Built with commit 3f93a49 |
endiliey
changed the title
There was a problem hiding this comment.
Tbh I'm not that keen on adding a large chunk of code into our Custom Pages doc because this approach is not very elegant (not that we have a better choice). Docusaurus v1 should handle this more cleanly with an option or something but I vaguely recall that it was hard for the library to inject in the custom CSS and JS due to how v1 was structured. Could we maybe revisit that?
If the problem still persists, I'd rather put a link a gist containing these instructions into the doc.
|
A good solution would be to have the files come with the installation of Docusaurus, and then to have the option to trigger them through the siteConfig. The guide can then mention that that is a siteConfig option. This would eliminate the need to copy/paste any code. If that can't be done and we need a guide in the meantime, I agree that the current iteration of my explanation is less than elegant. I've copied it to a gist with slight changes. Perhaps the big wall of text can be changed to "Docusaurus allows for adding buttons to copy code from fenced code blocks. Please follow the instructions here to add "copy" buttons to your code blocks." The only reason I can see to keep the big chunks of code there would be to take advantage of the "copy" button on the Docusaurus page, but it is not too much of an inconvenience for a user to have to copy it themselves. EDIT: I have made the change to the guide to link to the gist. |
Changed wall of text to be a link to a gist describing the code you need to add to add copy clipboard
There was a problem hiding this comment.
Thank you, this looks much better! I made some changes:
- Changed the gist to point to one from my account (just for correctness)
- Shifted the content to the "Markdown Features" page since it's more relevant and discoverable there.
Thanks again for the PR @aenuros!
Guide on how to add "Copy" buttons on code blocks in Docusaurus.
Motivation
All code blocks in the Docusaurus site have "copy" buttons on the upper right to let users copy the code to their clipboard. This functionality is also visible in some of the other sites that use Docusaurus such as Babel. However, if you follow the instructions for installation, the resulting site does not have those copy buttons. Moreover, the guide does not mention the copy button at all.
I opened issue #1039 and found that other users would also have preferred a clearer way to add the copy button. I have written a guide on which files need to be added in order to add the copy buttons. I have included it under "Custom Pages" since it results in a customization of the resulting site.
Have you read the Contributing Guidelines on pull requests?
Yes, CLA signed.
Test Plan
Not applicable.
Related PRs
Not applicable.