[Feature Request] Add “Copy to Clipboard” Button to Code Blocks on the Documentation Website

[A-N-07]

“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

[wuda-io]

Yes sure! Maybe make a small piece of code first, to see if it would work out well.
Thanks for contributing. Looking foward for a PR.

[A-N-07]

excellent. Just to make sure we are on the same page.

Do you mean I should fork the repo. Make my own branch and add the code to one code block on the documentation website. And do a PR?

Or do you want a better code example like the one I made before: 🔗 View CodePen Example ?

[A-N-07]

Hi team,

I just saw that the copy button feature I proposed has already been implemented — a bit unfortunate, as I was hoping to work on it as my first open source contribution. That said, it’s great to see the feature included!

If there are any other open tasks or smaller features that would be suitable for someone new to the project, I’d really appreciate any suggestions. I'd still love to contribute and get involved.

Best,
A-N-07

[wuda-io]

The goal is to transfer the whole documentation to markdown where we can generate the docs.
I think the first step is to put the docs in storybooks in the core again and then generate from there.
Please check out materializecss/materialize#634