feat(tui): add syntax highlighting for code blocks

Add syntax highlighting to markdown code blocks in the TUI using
cli-highlight with a VS Code Dark-inspired color theme.

Features:
- 191 languages supported via highlight.js
- Auto-detection fallback for unknown languages
- Graceful fallback to plain styling on errors
- VS Code Dark-inspired color palette

Colors:
- Purple: keywords (const, function, if, etc.)
- Teal: built-ins (console, Math, print, etc.)
- Orange: strings
- Green: numbers, comments
- Yellow: function names
- Blue: literals (true, false, null)
- Red: diff deletions
- Light blue: variables, parameters

🤖 AI-assisted (Claude) - fully tested locally

src/tui/theme/theme.ts

@@ -5,6 +5,7 @@ import type {
   SettingsListTheme,
 } from "@mariozechner/pi-tui";
 import chalk from "chalk";
+import { highlight, supportsLanguage } from "cli-highlight";
 import type { SearchableSelectListTheme } from "../components/searchable-select-list.js";
 
 const palette = {
@@ -34,6 +35,73 @@ const palette = {
 const fg = (hex: string) => (text: string) => chalk.hex(hex)(text);
 const bg = (hex: string) => (text: string) => chalk.bgHex(hex)(text);
 
+/**
+ * Syntax highlighting theme for code blocks.
+ * Uses chalk functions to style different token types.
+ */
+const syntaxTheme = {
+  keyword: chalk.hex("#C586C0"), // purple - if, const, function, etc.
+  built_in: chalk.hex("#4EC9B0"), // teal - console, Math, etc.
+  type: chalk.hex("#4EC9B0"), // teal - types
+  literal: chalk.hex("#569CD6"), // blue - true, false, null
+  number: chalk.hex("#B5CEA8"), // green - numbers
+  string: chalk.hex("#CE9178"), // orange - strings
+  regexp: chalk.hex("#D16969"), // red - regex
+  symbol: chalk.hex("#B5CEA8"), // green - symbols
+  class: chalk.hex("#4EC9B0"), // teal - class names
+  function: chalk.hex("#DCDCAA"), // yellow - function names
+  title: chalk.hex("#DCDCAA"), // yellow - titles/names
+  params: chalk.hex("#9CDCFE"), // light blue - parameters
+  comment: chalk.hex("#6A9955"), // green - comments
+  doctag: chalk.hex("#608B4E"), // darker green - jsdoc tags
+  meta: chalk.hex("#9CDCFE"), // light blue - meta/preprocessor
+  "meta-keyword": chalk.hex("#C586C0"), // purple
+  "meta-string": chalk.hex("#CE9178"), // orange
+  section: chalk.hex("#DCDCAA"), // yellow - sections
+  tag: chalk.hex("#569CD6"), // blue - HTML/XML tags
+  name: chalk.hex("#9CDCFE"), // light blue - tag names
+  attr: chalk.hex("#9CDCFE"), // light blue - attributes
+  attribute: chalk.hex("#9CDCFE"), // light blue - attributes
+  variable: chalk.hex("#9CDCFE"), // light blue - variables
+  bullet: chalk.hex("#D7BA7D"), // gold - list bullets in markdown
+  code: chalk.hex("#CE9178"), // orange - inline code
+  emphasis: chalk.italic, // italic
+  strong: chalk.bold, // bold
+  formula: chalk.hex("#C586C0"), // purple - math
+  link: chalk.hex("#4EC9B0"), // teal - links
+  quote: chalk.hex("#6A9955"), // green - quotes
+  addition: chalk.hex("#B5CEA8"), // green - diff additions
+  deletion: chalk.hex("#F44747"), // red - diff deletions
+  "selector-tag": chalk.hex("#D7BA7D"), // gold - CSS selectors
+  "selector-id": chalk.hex("#D7BA7D"), // gold
+  "selector-class": chalk.hex("#D7BA7D"), // gold
+  "selector-attr": chalk.hex("#D7BA7D"), // gold
+  "selector-pseudo": chalk.hex("#D7BA7D"), // gold
+  "template-tag": chalk.hex("#C586C0"), // purple
+  "template-variable": chalk.hex("#9CDCFE"), // light blue
+  default: fg(palette.code), // fallback to code color
+};
+
+/**
+ * Highlight code with syntax coloring.
+ * Returns an array of lines with ANSI escape codes.
+ */
+function highlightCode(code: string, lang?: string): string[] {
+  try {
+    // Check if language is supported, fall back to auto-detect
+    const language = lang && supportsLanguage(lang) ? lang : undefined;
+    const highlighted = highlight(code, {
+      language,
+      theme: syntaxTheme,
+      ignoreIllegals: true,
+    });
+    return highlighted.split("\n");
+  } catch {
+    // If highlighting fails, return plain code
+    return code.split("\n").map((line) => fg(palette.code)(line));
+  }
+}
+
 export const theme = {
   fg: fg(palette.text),
   dim: fg(palette.dim),
@@ -70,6 +138,7 @@ export const markdownTheme: MarkdownTheme = {
   italic: (text) => chalk.italic(text),
   strikethrough: (text) => chalk.strikethrough(text),
   underline: (text) => chalk.underline(text),
+  highlightCode,
 };
 
 export const selectListTheme: SelectListTheme = {