Fix dark theme code block readability and add TOC heading font-size hierarchy#2
Merged
CoderBoyBoy merged 7 commits intomainfrom Mar 20, 2026
Merged
Conversation
Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
- Replace toolbar icons (ToolbarIcon.tsx) with lucide-react components - Replace code block action buttons (copy/download/preview) with lucide-react SVG icons - Add parseCodeMeta utility for parsing extended code fence attributes - Add extractCodeBlocks utility for extracting code blocks with metadata - Add remark-code-meta plugin for preserving meta through render pipeline - Update rehype-highlight-code to forward meta as data-* attributes - Simplify sanitize schema to use data* wildcard - Add 24 comprehensive unit tests for code-meta parsing - Export new utilities (parseCodeMeta, extractCodeBlocks, remarkCodeMeta) Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
… icons - Add code block extended attributes documentation to README - Add parseCodeMeta/extractCodeBlocks API documentation to README - Update project structure in README to reflect new files - Update website demo to showcase code block extended attributes - Add code block meta example tab to website code examples - Update feature descriptions for both EN and ZH Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Optimize markdown component functionality and appearance
feat: lucide-react icons, code block extended attributes with parsing API
Mar 20, 2026
…t code-snippet When a code block includes `filename=App.tsx` in the fence meta, the download button now uses "App.tsx" as the download filename instead of the default "code-snippet.ts". The remark-code-meta plugin already parsed the filename and stored it as `data-filename` on the code block HTML element, but the download handler was ignoring it. Now MarkdownRenderer reads `data-filename` and passes it to triggerCodeDownload, which prioritizes it over the fallback code-content scanning logic. Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
Copilot
AI
changed the title
feat: lucide-react icons, code block extended attributes with parsing API
fix: use code fence Mar 20, 2026
filename= attribute as download filename
Previously all TOC items rendered at the same font size (0.8125em). Now toc-level-1 through toc-level-4 have differentiated font sizes to provide visual hierarchy matching the body content headings. Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
Copilot
AI
changed the title
fix: use code fence
Fix code block download filename from fence meta and add TOC heading font-size hierarchy
Mar 20, 2026
filename= attribute as download filename
Shiki dual-theme generates light-mode colors as default inline `color` values and stores dark-mode colors in `--shiki-dark` CSS variables. Without CSS rules to activate these variables, light-theme text colors (e.g., #24292E, #032F62) showed on dark backgrounds (#161b22), making code nearly unreadable. Added CSS rules that switch to `var(--shiki-dark)` in dark theme contexts (.markdown-theme-dark, .markdown-theme-github-dark, and .markdown-theme-auto with prefers-color-scheme: dark). Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
Copilot
AI
changed the title
Fix code block download filename from fence meta and add TOC heading font-size hierarchy
Fix dark theme code block readability and add TOC heading font-size hierarchy
Mar 20, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Two issues: code blocks in dark mode had near-invisible text, and TOC sidebar headings all rendered at the same font size regardless of depth.
Dark theme code block colors
Shiki dual-theme generates
color:#24292E;--shiki-dark:#E1E4E8on spans — light-mode color as default, dark-mode in a CSS variable. No CSS rule activated--shiki-dark, so light-theme text colors (dark grays, navy blues) rendered against the#161b22background.color: var(--shiki-dark) !importanton.shikiand.shiki spanfor.markdown-theme-dark,.markdown-theme-github-dark, and.markdown-theme-auto(viaprefers-color-scheme: dark)TOC sidebar heading hierarchy
All TOC levels rendered at the base
0.8125em. Added per-level font sizes via existingtoc-level-{depth}classes:1em+font-weight: 6000.9375em0.875em0.8125em💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.