feat: add copy button, line numbers, and line highlighting to code blocks
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 1
- Avg merge
- 12h 29m
- Merged PRs (30d)
- 12
Description
Problem
The code block component (`src/components/mdx/code.tsx`) is minimal — it only detects mermaid blocks and renders children. Missing standard doc-site code block features that users expect.
Missing Features
- Copy to clipboard button — most doc sites have this; reduces friction for code samples
- Line numbers — useful for referencing specific lines in explanations
- Line highlighting — ability to highlight specific lines (e.g. ```js {3,5-7}```)
- Language badge — show the language name in the corner
- Diff display — show added/removed lines for migration guides
Shiki (already used via `@shikijs/rehype`) supports line highlighting and diff via transformers. This should integrate with the existing Shiki setup rather than adding a new highlighting library.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/components/mdx/code.tsx and inspect the existing Shiki setup provided through @shikijs/rehype. Determine how the component can expose the requested copy button, line numbers, highlighting, language badge, and diff display without adding another highlighting library. Done means the code blocks support the listed features, including the example line-range syntax.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- documentation
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100