Add syntax highlighting to snippet card previews

[martinezharo]

What

Snippet card previews (home, folder view, and trash) rendered their truncated body as flat, dimmed plain text. They now show statically syntax-highlighted code, reusing the same lowlight grammars and VS Code token colors as the Markdown editor's code blocks so everything stays visually coherent.

Before → after (dark theme, JS card): keywords, strings (including template-literal ${} substitution), comments, numbers and function names are now colored, while the preview keeps its subdued, faded look and gradient fade.

How

• src/components/SnippetCards/snippetPreview.tsx (new)
  • Owns the truncation (buildPreviewLines, moved from SnippetCard).
  • Maps the project's LanguageId values to highlight.js grammar names (html→xml, toml→ini, tsx/jsx reuse their base grammar, etc.).
  • Loads lowlight via dynamic import() so the grammars stay out of the home page's initial bundle — the chunk is shared with the Markdown editor, which already uses createLowlight(common).
  • Converts the hast tree into one React-node array per line, re-opening tokens across line breaks so multi-line strings/comments keep their color.
  • Highlights the already-truncated text and memoizes results per language + text (bounded module cache) so hover / selection / drag never re-parse. Unsupported languages (svelte, vue, dart, …) and parse failures degrade to plain text.
• src/components/SnippetCards/SnippetCard.tsx — consumes the highlighted lines, keeping line numbers and the fade; tokens are slightly muted (opacity-[0.85]) to respect the current preview aesthetic.
• src/app/globals.css — the existing .hljs-* token color rules are shared with the previews via :is(.klipcode-md, .klipcode-code-preview), for both light and dark themes.

Testing

• pnpm lint and pnpm test (139 tests) pass via the pre-commit hook.
• tsc --noEmit clean.
• Verified in the running app (headless Chromium) that a JS snippet card renders colored tokens in both light and dark themes, and that the seeded Markdown card highlights headings/bullets — falling back to plain text otherwise.

🤖 Generated with Claude Code

https://claude.ai/code/session_01FrdhgUkHWaZGrXXiSL2DQx

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	klipcode	f3c5b9f	Commit Preview URL Branch Preview URL	Jul 10 2026, 09:57 PM