feat: added syntax highlighting to the docs!

Author: brandonkachen

bun.lock

@@ -78,6 +78,7 @@
     "pg": "^8.14.1",
     "pino": "^9.6.0",
     "posthog-js": "^1.234.10",
+    "prism-react-renderer": "^2.4.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.55.0",

web/package.json

@@ -1,12 +1,13 @@
 'use client'
 
 import { Check, Copy } from 'lucide-react'
+import { Highlight, themes } from 'prism-react-renderer'
 import { useMemo, useState } from 'react'
 
-import { MermaidDiagram } from './mermaid-diagram'
-
 import { Separator } from '@/components/ui/separator'
 
+import { MermaidDiagram } from './mermaid-diagram'
+
 type CodeDemoChildren = string | JSX.Element | JSX.Element[]
 
 interface CodeDemoProps {
@@ -33,6 +34,107 @@ const getContent = (c: CodeDemoChildren): string => {
   return ''
 }
 
+const trimLeadingWhitespace = (content: string): string => {
+  const lines = content.split('\n')
+  const nonEmptyLines = lines.filter((line) => line.trim() !== '')
+
+  if (nonEmptyLines.length === 0) return content
+
+  // Find the minimum indentation among non-empty lines
+  const minIndent = Math.min(
+    ...nonEmptyLines.map((line) => {
+      const match = line.match(/^\s*/)
+      return match ? match[0].length : 0
+    })
+  )
+
+  // Remove the minimum indentation from all lines
+  const trimmedLines = lines.map((line) => {
+    if (line.trim() === '') return line // Keep empty lines as-is
+    return line.slice(minIndent)
+  })
+
+  return trimmedLines.join('\n')
+}
+
+// Map common language aliases to Prism language identifiers
+const languageMap: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  jsx: 'jsx',
+  tsx: 'tsx',
+  py: 'python',
+  sh: 'bash',
+  shell: 'bash',
+  yml: 'yaml',
+  md: 'markdown',
+  json: 'json',
+  html: 'html',
+  css: 'css',
+  sql: 'sql',
+  go: 'go',
+  rust: 'rust',
+  java: 'java',
+  php: 'php',
+  ruby: 'ruby',
+  c: 'c',
+  cpp: 'cpp',
+  'c++': 'cpp',
+  csharp: 'csharp',
+  'c#': 'csharp',
+  swift: 'swift',
+  kotlin: 'kotlin',
+  scala: 'scala',
+  dart: 'dart',
+  dockerfile: 'docker',
+  yaml: 'yaml',
+  toml: 'toml',
+  ini: 'ini',
+  xml: 'xml',
+  graphql: 'graphql',
+  prisma: 'prisma',
+}
+
+// Language-specific color constants
+const LANGUAGE_COLORS = {
+  bash: '#8FE457', // BetweenGreen for bash commands
+  white: '#ffffff', // White for text/plain/markdown
+  default: null, // Use theme default for other languages
+} as const
+
+// Define which languages should use which color scheme
+const LANGUAGE_COLOR_MAP: Record<string, keyof typeof LANGUAGE_COLORS> = {
+  bash: 'bash',
+  text: 'white',
+  plain: 'white',
+  markdown: 'white',
+}
+
+const getLanguageTheme = (language: string) => {
+  const baseTheme = themes.vsDark
+  const colorScheme = LANGUAGE_COLOR_MAP[language]
+  const overrideColor = colorScheme && LANGUAGE_COLORS[colorScheme]
+
+  // For white-only languages, use minimal theme with no token styles
+  if (colorScheme === 'white') {
+    return {
+      theme: {
+        plain: { color: '#ffffff', backgroundColor: 'transparent' },
+        styles: [],
+      },
+      tokenColor: '#ffffff',
+    }
+  }
+
+  return {
+    theme: {
+      ...baseTheme,
+      plain: { ...baseTheme.plain, backgroundColor: 'transparent' },
+    },
+    tokenColor: overrideColor || null,
+  }
+}
+
 export function CodeDemo({ children, language, rawContent }: CodeDemoProps) {
   const [copied, setCopied] = useState(false)
 
@@ -50,7 +152,7 @@ export function CodeDemo({ children, language, rawContent }: CodeDemoProps) {
   const childrenContent = useMemo(() => {
     // Use rawContent if available (from remark plugin), otherwise fall back to processing children
     const content = rawContent || getContent(children)
-    return content
+    return trimLeadingWhitespace(content)
   }, [children, language, rawContent])
 
   // Check if this is a mermaid diagram
@@ -83,8 +185,24 @@ export function CodeDemo({ children, language, rawContent }: CodeDemoProps) {
     )
   }
 
+  // Normalize language and get theme/color in one useMemo
+  const {
+    normalizedLanguage,
+    theme: highlightTheme,
+    tokenColor,
+  } = useMemo(() => {
+    const normalized = language.toLowerCase().trim()
+    const normalizedLang = languageMap[normalized] || normalized
+    const { theme, tokenColor } = getLanguageTheme(normalizedLang)
+    return {
+      normalizedLanguage: normalizedLang,
+      theme,
+      tokenColor,
+    }
+  }, [language])
+
   return (
-    <div className="rounded-lg border bg-muted/30 px-4 w-full max-w-80 md:max-w-full my-3 transition-all group hover:bg-muted/40 overflow-x-auto">
+    <div className="rounded-lg border px-4 w-full max-w-80 md:max-w-full my-3 transition-all group overflow-x-auto">
       <div className="flex items-center justify-between h-6 mt-0.5 mb-0.5">
         <div className="text-[10px] text-muted-foreground/40 font-mono tracking-wide">
           {language.toLowerCase()}
@@ -103,9 +221,45 @@ export function CodeDemo({ children, language, rawContent }: CodeDemoProps) {
       </div>
       {language && <Separator className="bg-border/20 mb-0.5" />}
       <div>
-        <pre className="text-[13px] leading-relaxed py-1 bg-transparent text-foreground/90 rounded-lg scrollbar-thin scrollbar-thumb-muted-foreground/10 scrollbar-track-transparent">
-          <code className="font-mono">{childrenContent}</code>
-        </pre>
+        <Highlight
+          theme={highlightTheme}
+          code={childrenContent}
+          language={normalizedLanguage}
+        >
+          {({ className, style, tokens, getLineProps, getTokenProps }) => {
+            return (
+              <pre
+                className={`${className} text-[13px] leading-relaxed py-2 bg-transparent rounded-lg scrollbar-thin scrollbar-thumb-muted-foreground/10 scrollbar-track-transparent`}
+                style={{
+                  ...style,
+                  backgroundColor: 'transparent',
+                  color: tokenColor || style.color,
+                }}
+              >
+                {tokens.map((line, i) => (
+                  <div key={i} {...getLineProps({ line })}>
+                    {line.map((token, key) => {
+                      const tokenProps = getTokenProps({ token, key })
+                      // Override colors for special languages in render loop
+                      const color = tokenColor || tokenProps.style?.color
+
+                      return (
+                        <span
+                          key={key}
+                          {...tokenProps}
+                          style={{
+                            ...tokenProps.style,
+                            color,
+                          }}
+                        />
+                      )
+                    })}
+                  </div>
+                ))}
+              </pre>
+            )
+          }}
+        </Highlight>
       </div>
     </div>
   )