Modifiable component for code blocks

[nobkd]

I want to add a copy button to the code blocks, and would like to use a component for that. Currently, this is not possible, because a hardcoded string <pre>code block</pre> is created. It's probably possible, to add a default function to the layout components in nuemark, and if a component exists, it gets overriden.

I'll take a look, if this is easily solvable.

[Harshul23]

Hi @nobkd and the team of nuejs,

I’ve implemented the feature requested in this issue to add a “Copy” button to code blocks. This new component, CodeBlockWithCopy, seamlessly integrates with our existing rendering pipeline by overriding the default code block output. It allows users to quickly copy code snippets with just hover on code block and a single click, enhancing both usability and developer experience.

• Standards-First & Minimalism: The solution adheres to Nue’s philosophy by keeping the implementation simple and lightweight. No unnecessary abstractions were added, ensuring that every line of code is essential.
• Modern Web Practices: It leverages the modern Clipboard API and React’s hooks to provide a smooth and responsive copy functionality.
• Easy Integration: The component is designed to replace the built-in code block rendering with minimal changes required in the configuration (i.e., updating the component override in site.yaml).

I believe this feature not only addresses the issue effectively but also reinforces our commitment to a standards-first and brutally simple approach. I’m looking forward to your feedback and am happy to make any adjustments needed.

Here is how it looks !

With a better user experience.