Add syntax highlighting (#178)

Author: mrubens

apps/web/package.json

@@ -64,6 +64,7 @@
     "react-use": "^17.6.0",
     "recharts": "^2.15.3",
     "require-in-the-middle": "^7.5.2",
+    "shiki": "^3.7.0",
     "sonner": "^2.0.3",
     "stripe": "^18.2.0",
     "tailwind-merge": "^3.3.0",

apps/web/src/components/ui/CodeBlock.tsx

@@ -1,46 +1,38 @@
 'use client';
 
 import { MermaidDiagram } from './MermaidDiagram';
-import type { Element } from 'hast';
+import { SyntaxHighlighter } from './SyntaxHighlighter';
 
 interface CodeBlockProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
   className?: string;
-  inline?: boolean;
-  node?: Element;
 }
 
 export const CodeBlock = ({
   children,
   className,
-  inline,
   ...props
 }: CodeBlockProps) => {
-  // Extract language from className (format: "language-xxx")
   const match = /language-(\w+)/.exec(className || '');
   const language = match ? match[1] : '';
-
-  // Convert children to string
   const code = String(children).replace(/\n$/, '');
 
-  // If it's inline code or not mermaid, render as regular code
-  if (inline || language !== 'mermaid') {
+  // No language = inline code (from `backticks`)
+  if (!match) {
     return (
       <code className={className} {...props}>
         {children}
       </code>
     );
   }
 
-  // If it's a mermaid code block, render with MermaidDiagram
+  // Mermaid diagrams
   if (language === 'mermaid') {
-    return <MermaidDiagram chart={code} className="my-4" />;
+    return <MermaidDiagram chart={code} className="my-2" />;
   }
 
-  // Fallback to regular code block
+  // Code blocks with syntax highlighting
   return (
-    <code className={className} {...props}>
-      {children}
-    </code>
+    <SyntaxHighlighter code={code} language={language || ''} className="my-2" />
   );
 };

apps/web/src/components/ui/SyntaxHighlighter.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { useEffect, useState, useCallback } from 'react';
+import { useTheme } from 'next-themes';
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } from 'shiki';
+
+interface SyntaxHighlighterProps {
+  code: string;
+  language: string;
+  className?: string;
+}
+
+// Cache for the highlighter instance
+let highlighterCache: HighlighterGeneric<BundledLanguage, BundledTheme> | null =
+  null;
+let highlighterPromise: Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> | null = null;
+
+// Common languages to preload for better performance
+const COMMON_LANGUAGES: BundledLanguage[] = [
+  'javascript',
+  'typescript',
+  'jsx',
+  'tsx',
+  'python',
+  'java',
+  'go',
+  'rust',
+  'cpp',
+  'c',
+  'csharp',
+  'php',
+  'ruby',
+  'swift',
+  'kotlin',
+  'scala',
+  'html',
+  'css',
+  'scss',
+  'json',
+  'yaml',
+  'xml',
+  'markdown',
+  'bash',
+  'shell',
+  'sql',
+  'dockerfile',
+];
+
+const getHighlighter = async () => {
+  if (highlighterCache) {
+    return highlighterCache;
+  }
+
+  if (highlighterPromise) {
+    return highlighterPromise;
+  }
+
+  highlighterPromise = (async () => {
+    const { createHighlighter } = await import('shiki');
+
+    const highlighter = await createHighlighter({
+      themes: ['github-light', 'github-dark'],
+      langs: COMMON_LANGUAGES,
+    });
+
+    highlighterCache = highlighter;
+    return highlighter;
+  })();
+
+  return highlighterPromise;
+};
+
+export const SyntaxHighlighter = ({
+  code,
+  language,
+  className,
+}: SyntaxHighlighterProps) => {
+  const [highlightedCode, setHighlightedCode] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { theme, systemTheme } = useTheme();
+
+  const currentTheme = theme === 'system' ? systemTheme : theme;
+  const shikiTheme = currentTheme === 'dark' ? 'github-dark' : 'github-light';
+
+  const highlightCode = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const highlighter = await getHighlighter();
+
+      // Check if the language is supported, fallback to 'text' if not
+      const supportedLanguages = highlighter.getLoadedLanguages();
+      const langToUse = supportedLanguages.includes(language as BundledLanguage)
+        ? (language as BundledLanguage)
+        : 'text';
+
+      // If the language isn't loaded yet, try to load it
+      if (!supportedLanguages.includes(langToUse) && langToUse !== 'text') {
+        try {
+          await highlighter.loadLanguage(langToUse);
+        } catch {
+          // If loading fails, fall back to text
+        }
+      }
+
+      const html = highlighter.codeToHtml(code, {
+        lang: langToUse,
+        theme: shikiTheme,
+        transformers: [
+          {
+            pre(node) {
+              // Remove default background and padding since we'll handle it with CSS
+              if (node.properties.style) {
+                node.properties.style = (node.properties.style as string)
+                  .replace(/background-color:[^;]+;?/g, '')
+                  .replace(/padding:[^;]+;?/g, '');
+              }
+            },
+          },
+        ],
+      });
+
+      setHighlightedCode(html);
+    } catch (err) {
+      console.error('Failed to highlight code:', err);
+      setError('Failed to highlight code');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [code, language, shikiTheme]);
+
+  useEffect(() => {
+    highlightCode();
+  }, [highlightCode]);
+
+  if (error) {
+    // Fallback to plain code if highlighting fails
+    return (
+      <pre
+        className={`bg-muted p-3 rounded overflow-x-auto ${className || ''}`}
+      >
+        <code className="bg-transparent p-0 font-mono text-sm">{code}</code>
+      </pre>
+    );
+  }
+
+  if (isLoading) {
+    // Show loading state with plain code
+    return (
+      <pre
+        className={`bg-muted p-3 rounded overflow-x-auto ${className || ''}`}
+      >
+        <code className="bg-transparent p-0 font-mono text-sm opacity-70">
+          {code}
+        </code>
+      </pre>
+    );
+  }
+
+  return (
+    <div
+      className={`bg-muted p-3 rounded overflow-x-auto [&>pre]:!bg-transparent [&>pre]:!p-0 [&>pre]:!m-0 ${className || ''}`}
+      dangerouslySetInnerHTML={{ __html: highlightedCode }}
+    />
+  );
+};

apps/web/src/components/ui/__tests__/CodeBlock.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from 'next-themes';
+import { CodeBlock } from '../CodeBlock';
+
+// Mock the SyntaxHighlighter component
+vi.mock('../SyntaxHighlighter', () => ({
+  SyntaxHighlighter: ({
+    code,
+    language,
+    className,
+  }: {
+    code: string;
+    language: string;
+    className?: string;
+  }) => (
+    <div
+      data-testid="syntax-highlighter"
+      data-language={language}
+      className={className}
+    >
+      {code || ''}
+    </div>
+  ),
+}));
+
+// Mock the MermaidDiagram component
+vi.mock('../MermaidDiagram', () => ({
+  MermaidDiagram: ({
+    chart,
+    className,
+  }: {
+    chart: string;
+    className?: string;
+  }) => (
+    <div data-testid="mermaid-diagram" className={className}>
+      {chart}
+    </div>
+  ),
+}));
+
+const renderWithTheme = (component: React.ReactElement) => {
+  return render(
+    <ThemeProvider attribute="class" defaultTheme="light">
+      {component}
+    </ThemeProvider>,
+  );
+};
+
+describe('CodeBlock', () => {
+  it('renders inline code as regular code element', () => {
+    renderWithTheme(<CodeBlock>const x = 1;</CodeBlock>);
+
+    const codeElement = screen.getByText(/const/).closest('code');
+    expect(codeElement?.tagName).toBe('CODE');
+  });
+
+  it('renders mermaid code blocks using MermaidDiagram component', () => {
+    const mermaidCode = `graph TD
+    A[Start] --> B{Is it working?}`;
+
+    renderWithTheme(
+      <CodeBlock className="language-mermaid">{mermaidCode}</CodeBlock>,
+    );
+
+    expect(screen.getByTestId('mermaid-diagram')).toBeInTheDocument();
+  });
+
+  it('renders code blocks with language using SyntaxHighlighter', () => {
+    renderWithTheme(
+      <CodeBlock className="language-javascript">
+        console.log(&apos;test&apos;);
+      </CodeBlock>,
+    );
+
+    const syntaxHighlighter = screen.getByTestId('syntax-highlighter');
+    expect(syntaxHighlighter).toBeInTheDocument();
+    expect(syntaxHighlighter).toHaveAttribute('data-language', 'javascript');
+  });
+
+  it('renders text language using SyntaxHighlighter', () => {
+    renderWithTheme(
+      <CodeBlock className="language-text">This is plain text</CodeBlock>,
+    );
+
+    const syntaxHighlighter = screen.getByTestId('syntax-highlighter');
+    expect(syntaxHighlighter).toBeInTheDocument();
+    expect(syntaxHighlighter).toHaveAttribute('data-language', 'text');
+  });
+
+  it('renders inline code when no language is specified', () => {
+    renderWithTheme(<CodeBlock>Some code without language</CodeBlock>);
+
+    const codeElement = screen
+      .getByText(/Some code without language/)
+      .closest('code');
+    expect(codeElement).toBeInTheDocument();
+    expect(codeElement?.tagName).toBe('CODE');
+  });
+});