feat: add copy button, line numbers, and line highlighting to code blocks
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 48/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- documentation
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.
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.
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 1
- Avg merge
- 12h 29m
- Merged PRs (30d)
- 12
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.
More from raystack/chronicle
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 4/5 3-5 days Newbie friendliness 65/100
-
Difficulty 4/5 3-5 days Newbie friendliness 48/100
All issues in raystack/chronicle
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
ontola/atomic-server#1625 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
melgarafael/DeskcommCRM#1451 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 82/100
-
bug via-triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
bot:ai-assisted component:compact-js status:untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
midnightntwrk/midnight-sdk#403 ·