Skip to content

Add syntax highlighting for code blocks in editor and rendered markdown - #50

Draft
disnet wants to merge 3 commits into
mainfrom
card/3mex7ikl5ic2n
Draft

disnet wants to merge 3 commits into
mainfrom
card/3mex7ikl5ic2n

Conversation

@disnet

@disnet disnet commented Feb 16, 2026

Copy link
Copy Markdown
Owner

Summary

  • Add syntax highlighting for fenced code blocks (js, python, etc.) in both the CodeMirror editor and the rendered markdown view for card descriptions and comments
  • Editor uses lezer-based token highlighting via HighlightStyle with 19 tag-to-color mappings (keywords, strings, comments, numbers, types, functions, operators, etc.)
  • Rendered view uses highlight.js + marked-highlight with 12 individually-imported languages (JS, TS, Python, Rust, Go, CSS, HTML, JSON, YAML, Bash, SQL, Markdown)
  • Fenced code blocks in the editor get a subtle background decoration to distinguish them from prose

Test plan

  • Verify fenced code blocks with language identifiers show syntax highlighting in the CodeMirror editor
  • Verify fenced code blocks in rendered (read-only) descriptions and comments show syntax highlighting
  • Verify highlighting works in both light and dark modes
  • Verify languages without parsers fall back gracefully to plain monospace text
  • Verify no regression in existing inline markdown live-preview (bold, italic, links, headings)
  • Verify bundle size impact is reasonable

🤖 Generated with Claude Code

Sprite and others added 2 commits February 16, 2026 05:26
Editor: Adds a HighlightStyle with token-to-color mappings for keywords,
strings, comments, numbers, types, functions, etc. in fenced code blocks.
Also adds a subtle background for fenced code blocks in the editor.

Rendered view: Integrates highlight.js + marked-highlight for syntax
highlighting in rendered descriptions and comments. Uses individual
language imports (JS, TS, Python, Rust, Go, CSS, HTML, JSON, YAML,
Bash, SQL, Markdown) to minimize bundle size.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The CodeMirror editors use fontFamily: "inherit" (sans-serif), so fenced
code blocks appeared in the same proportional font as prose. Add monospace
font and 0.9em font size to .cm-md-fenced-code, matching the existing
inline code (.cm-md-code) styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@disnet
disnet marked this pull request as draft February 16, 2026 06:15
…round

- Hide opening (```lang) and closing (```) fence lines when cursor is
  outside the code block, collapsing them entirely including newlines
- Use line decorations for full-width background color on code lines
  instead of mark decorations that only cover text content
- Keep mark decoration for monospace font on code text content
- When cursor enters the code block, raw markdown is shown for editing

Co-Authored-By: Claude Opus 4.6 <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.

1 participant