`, then post-process the HTML to replace those placeholders with React-rendered `CodeViewer` components.
- [ ] **Step 1: Replace the entire MarkdownRenderer.tsx**
```tsx
import { useMemo, useCallback } from 'react'
import { marked, type Tokens } from 'marked'
import { CodeViewer } from '../chat/CodeViewer'
type Props = {
content: string
}
type CodeBlock = {
id: string
code: string
language: string | undefined
}
// Unique marker that won't appear in normal markdown content
const CODEBLOCK_MARKER = '___CODEBLOCK___'
const renderer = new marked.Renderer()
// Collected code blocks during a single parse() call
let pendingCodeBlocks: CodeBlock[] = []
renderer.code = function ({ text, lang }: Tokens.Code) {
const id = `cb-${pendingCodeBlocks.length}`
pendingCodeBlocks.push({ id, code: text, language: lang || undefined })
// Return a placeholder div that we'll replace with React components
return `
`
}
marked.setOptions({
breaks: true,
gfm: true,
})
marked.use({ renderer })
function parseMarkdown(content: string): { html: string; codeBlocks: CodeBlock[] } {
pendingCodeBlocks = []
const html = marked.parse(content) as string
const codeBlocks = [...pendingCodeBlocks]
pendingCodeBlocks = []
return { html, codeBlocks }
}
export function MarkdownRenderer({ content }: Props) {
const { html, codeBlocks } = useMemo(() => parseMarkdown(content), [content])
// Split HTML at codeblock placeholders and interleave React components
const parts = useMemo(() => {
if (codeBlocks.length === 0) {
return [{ type: 'html' as const, content: html }]
}
const result: Array<{ type: 'html'; content: string } | { type: 'code'; block: CodeBlock }> = []
let remaining = html
for (const block of codeBlocks) {
const marker = `
`
const idx = remaining.indexOf(marker)
if (idx === -1) continue
const before = remaining.slice(0, idx)
if (before) {
result.push({ type: 'html', content: before })
}
result.push({ type: 'code', block })
remaining = remaining.slice(idx + marker.length)
}
if (remaining) {
result.push({ type: 'html', content: remaining })
}
return result
}, [html, codeBlocks])
const handleClick = useCallback(async (event: React.MouseEvent
) => {
const target = event.target as HTMLElement | null
const button = target?.closest('[data-copy-code]')
if (!button) return
const text = button.getAttribute('data-copy-code')
if (!text) return
try {
await navigator.clipboard.writeText(text)
const original = button.textContent
button.textContent = 'Copied'
window.setTimeout(() => {
button.textContent = original
}, 1500)
} catch {
// Ignore clipboard errors
}
}, [])
const proseClasses = `prose prose-sm max-w-none text-[var(--color-text-primary)]
prose-headings:text-[var(--color-text-primary)] prose-headings:font-semibold
prose-p:my-2 prose-p:leading-relaxed
prose-code:text-[13px] prose-code:font-[var(--font-mono)] prose-code:bg-[var(--color-surface-info)] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded
prose-pre:!bg-transparent prose-pre:!p-0 prose-pre:!shadow-none
prose-a:text-[var(--color-text-accent)] prose-a:no-underline hover:prose-a:underline
prose-strong:text-[var(--color-text-primary)]
prose-ul:my-2 prose-ol:my-2
prose-li:my-0.5
prose-table:text-sm
prose-th:bg-[var(--color-surface-info)] prose-th:px-3 prose-th:py-2
prose-td:px-3 prose-td:py-2 prose-td:border-[var(--color-border)]`
// If no code blocks, render the simple way (same as before)
if (codeBlocks.length === 0) {
return (
)
}
// Mixed content: interleave HTML fragments with React CodeViewer components
return (
{parts.map((part, i) =>
part.type === 'html' ? (
) : (
)
)}
` marker, which is replaced post-parse with `CodeViewer`
- Non-code HTML still uses `dangerouslySetInnerHTML` (for paragraphs, headings, lists, etc.)
- No more `highlightCode.ts` import
- Copy button for code blocks is now handled by `CodeViewer`'s `CopyButton` (instead of `data-copy-code` attribute)
- Prose classes preserved exactly as before
- [ ] **Step 2: Commit**
```bash
cd /Users/nanmi/workspace/myself_code/claude-code-haha && git add desktop/src/components/markdown/MarkdownRenderer.tsx && git commit -m "feat: rewrite MarkdownRenderer code blocks with React CodeViewer — no more HTML string templates"
```
---
### Task 5: Delete highlightCode.ts and clean up globals.css
**Files:**
- Delete: `desktop/src/components/chat/highlightCode.ts`
- Modify: `desktop/src/theme/globals.css` (lines 4-42)
- [ ] **Step 1: Delete highlightCode.ts**
```bash
rm /Users/nanmi/workspace/myself_code/claude-code-haha/desktop/src/components/chat/highlightCode.ts
```
- [ ] **Step 2: Remove all .hljs-* CSS rules from globals.css**
In `desktop/src/theme/globals.css`, delete lines 4-42 (the entire highlight.js theme section):
```css
/* DELETE everything from line 4 to line 42: */
/* ─── highlight.js dark theme (VS Code Dark+ inspired) ────────── */
.hljs { ... }
.hljs-keyword { ... }
/* ... all .hljs-* rules ... */
.hljs-punctuation { color: #57606a; }
```
Replace with a single comment:
```css
/* Code highlighting is handled by prism-react-renderer (inline styles) */
```
- [ ] **Step 3: Verify full TypeScript compilation**
```bash
cd /Users/nanmi/workspace/myself_code/claude-code-haha/desktop && npx tsc --noEmit
```
Expected: Zero errors. No file should import `highlightCode.ts`, `highlight.js`, or `diff` anymore.
- [ ] **Step 4: Run tests**
```bash
cd /Users/nanmi/workspace/myself_code/claude-code-haha/desktop && npm test -- --run
```
Expected: All tests pass.
- [ ] **Step 5: Commit**
```bash
cd /Users/nanmi/workspace/myself_code/claude-code-haha && git add -A && git commit -m "chore: delete highlightCode.ts and .hljs CSS — fully migrated to prism-react-renderer"
```
---
### Task 6: Final verification
- [ ] **Step 1: Start the dev server**
```bash
cd /Users/nanmi/workspace/myself_code/claude-code-haha/desktop && npm run dev
```
- [ ] **Step 2: Verify visually**
Check in the running app:
1. **Code blocks with language** (e.g. ` ```python`): syntax highlighting + line numbers
2. **Code blocks without language** (e.g. ` ``` `): plain text, no line numbers, no colors
3. **Diff blocks** (Edit/Write tool calls): GitHub PR-style with green/red backgrounds, word-level diff highlighting, syntax coloring
4. **PermissionDialog** with Edit tool: shows diff preview correctly
5. **Markdown content**: headings, lists, tables, inline code all render correctly
6. **Copy buttons**: work in both code blocks and diff viewer header
- [ ] **Step 3: Verify bundle size improvement**
```bash
cd /Users/nanmi/workspace/myself_code/claude-code-haha/desktop && npm run build 2>&1 | tail -20
```
Expected: Bundle size should be similar or smaller (prism-react-renderer ~12KB + react-diff-viewer-continued ~50KB vs highlight.js ~74KB + diff ~20KB).