Gallery

Design a reusable code snippet component for docs, tutorials, or help articles. It should present code as a distinct block with a small header for the language name and any actions, followed by the code area itself.

The code area needs syntax highlighting that separates keywords, strings, comments, and function names. Include line numbers, but make them optional so the code still reads cleanly when the user hides them. Handle long lines without breaking the layout.

Add a copy button that confirms success in place, then returns to its default state. If you include extra controls like expand/collapse or theme switching, keep them secondary to the code and make sure they do not compete with the copy action.

The final component should feel at home in both light and dark documentation layouts, with enough contrast to scan quickly and enough spacing to avoid visual noise.