Description
“Copy to Clipboard” Button
Hi maintainers,
This is my first issue on an open-source project—so I’m excited to hopefully contribute something helpful.
Background
I'm a software engineering student, and during a recent school project I was required to use the Materialize framework to build a website. While going through the docs, I repeatedly found myself manually selecting the code blocks and pressing Ctrl + C to copy them. It works, but it's a bit tedious—especially when trying out many snippets while learning.
That’s why I’d like to propose adding a “Copy to clipboard” button to code blocks on the documentation site. This is something many developer-focused sites use nowadays (e.g. ChatGPT, MDN, Bootstrap), and it improves usability by saving time and effort.
Proposal
- Add a small copy button in the top-right corner of each
<pre><code>block. - When clicked, the full content of the code block gets copied to the clipboard.
- Include a tooltip or temporary message like "Copied!" to give feedback.
Why it fits the project goals
This is not just a personal preference—it’s a widely-used UI enhancement that helps everyone using the docs. It makes learning and prototyping with Materialize faster and easier, especially for new developers.
Code Example
Here’s a simple CodePen to illustrate how the feature could work:
🔗 View CodePen Example
(This is an idea not a prototype so I am open to ideas)
Suggested Next Step
If you're open to this feature, I’d love to start small by adding it to just one page of the documentation as a test. That way, you can evaluate the UX before deciding on a broader rollout. Could you suggest a good page to implement the first version?
Thanks for considering this! I appreciate the work you do on this project and would be excited to contribute.
Best regards,
A-N-07