🤖 feat: add line numbers and copy button to markdown code blocks #474
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add line numbers in left gutter using CSS grid layout - Implement reusable CopyButton component with clipboard fallback - Add CopyIcon SVG component - Extract clipboard logic to src/utils/clipboard.ts - Support syntax highlighting with Shiki - Enable line wrapping without horizontal scroll - Add subtle hover-to-reveal copy button - Include Storybook examples for both components - Fix fmt.mk to check ~/.local/bin/uvx - Increase line-height to 1.6 for better readability
- Update useCopyToClipboard hook to use copyToClipboard utility as default - Replace navigator.clipboard.writeText with copyToClipboard in UserMessage - Replace navigator.clipboard.writeText with copyToClipboard in AssistantMessage - Remove redundant defaultClipboardWriteText function from UserMessage - All clipboard operations now use the centralized utility with fallback support
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Enhances markdown code block rendering with line numbers, syntax highlighting, and a reusable copy-to-clipboard button.
Changes
Code Block Display
Copy Functionality
src/components/ui/CopyButton.tsx)src/components/icons/CopyIcon.tsx)classNamefor styling flexibilitysrc/utils/clipboard.ts)navigator.clipboardAPI with fallbackStorybook Examples
CodeBlock.stories.tsx- Various code block examplesCopyButton.stories.tsx- Reusable copy button demosAdditional Fixes
fmt.mkto check~/.local/bin/uvxfor uvx availabilityVisual Design
Code blocks now have:
Testing
All components visible in Storybook:
Components/Messages/CodeBlock- Code block examplesUI/CopyButton- Copy button standalone examplesGenerated with
cmux