# Syntax-Highlighted Code Block Implementation Guide
**Source Reference**: MindStrike project (`~/projects/mindstrike`)
**Primary Files**:
- `src/components/MarkdownViewer.tsx`
- `src/chat/components/ChatMessage.tsx`
---
## Overview
This guide details how to implement syntax-highlighted code blocks in the attachment viewer, based on the MindStrike implementation pattern.
## Architecture: Client-Side Rendering
**All syntax highlighting happens in the browser** (client-side), not on the server.
### Why Client-Side?
- No server CPU overhead for syntax processing
- Instant visual updates without server round-trips
- Better browser performance with modern JS engines
- Easier to add interactive features (copy buttons, theme toggle)
---
## Dependencies Required
```json
{
"react-syntax-highlighter": "^15.6.1",
"marked": "^14.1.3",
"dompurify": "^3.2.2"
}
```
**Note**: We already have `marked` and `dompurify` installed. Only need to add `react-syntax-highlighter`.
---
## Implementation Steps
### Step 1: Code Block Detection (Server-Side)
**Location**: `src/server/utils/markdown-renderer.ts`
```typescript
// Regex to detect code blocks
const codeRegex = /```([a-zA-Z0-9_+-]*)\n?([\s\S]*?)\n?```/g;
// Extract code blocks before markdown processing
const codeBlocks: Array<{language: string, code: string}> = [];
let match;
while ((match = codeRegex.exec(markdown)) !== null) {
const language = match[1] || 'text';
const code = match[2].trim();
codeBlocks.push({ language, code });
// Replace with placeholder that won't be processed by marked
const placeholder = `__CODE_BLOCK_${codeBlocks.length - 1}__`;
markdown = markdown.replace(match[0], placeholder);
}
```
### Step 2: Markdown to HTML Conversion (Server-Side)
```typescript
import { marked } from 'marked';
// Process markdown (code blocks already extracted)
const html = marked.parse(markdown) as string;
```
### Step 3: Inject Code Block Placeholders (Server-Side)
```typescript
// Replace placeholders with special markers for client-side rendering
let finalHtml = html;
codeBlocks.forEach((block, index) => {
const marker = `
${escapeHtml(block.code)}
`;
finalHtml = finalHtml.replace(`__CODE_BLOCK_${index}__`, marker);
});
// Escape HTML to prevent XSS
function escapeHtml(text: string): string {
const map: Record = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, char => map[char] || char);
}
```
### Step 4: Client-Side Highlighting (HTML Template)
**Location**: `src/server/templates/viewer-template.ts`
Add this script to the HTML template:
```html
```
### Step 5: CSS Styling (HTML Template)
Add to the `