Skip to content

feat: add syntax highlighting for code blocks#19

Open
roishik wants to merge 1 commit into
maypaz:mainfrom
roishik:feat/syntax-highlighting
Open

feat: add syntax highlighting for code blocks#19
roishik wants to merge 1 commit into
maypaz:mainfrom
roishik:feat/syntax-highlighting

Conversation

@roishik

@roishik roishik commented Apr 12, 2026

Copy link
Copy Markdown

Summary

  • Add syntax highlighting for fenced code blocks using highlight.js
  • Support 15 common languages (JS, TS, Python, Bash, JSON, HTML, CSS, Go, Rust, YAML, SQL, Java, C++, Ruby, Markdown)
  • Use Atom One Dark theme for beautiful, readable code presentation

What changed

  • src/index.ts: Integrated highlight.js via markdown-it's highlight option with tree-shaken language imports (only importing needed languages to minimize bundle size)
  • src/templates.ts: Added Atom One Dark CSS theme for syntax token colorization
  • src/index.test.ts: Added 4 new tests verifying highlight.js integration
  • package.json: Added highlight.js dependency

Demo

Open the demo files to see the before/after comparison:

  • demo/before-highlight.html — Plain monochrome code blocks
  • demo/after-highlight.html — Colorized syntax highlighting

Test plan

  • All 79 existing tests pass
  • 4 new syntax highlighting tests added and passing
  • TypeScript typecheck passes
  • Verify code blocks render with colors on a published page
  • Verify code blocks without language hints still render correctly

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants