Implement LaTeX export with minimal preamble and xcolor

- Complete standalone LaTeX document (article class)
- Minimal preamble: fontenc, amsmath, xcolor packages
- Colors defined in preamble with \definecolor{termX}{HTML}{hex}
- Non-interactive: \htmlClass removed, \textcolor applied for colors
- Equation in equation environment
- Description with colored terms
- Definitions with colored headings and preserved inline math
- Helper functions:
  - stripHtmlClassForLatex: converts \htmlClass to \textcolor
  - convertDescriptionToLatex: strips HTML tags, escapes LaTeX
  - escapeLatexPreservingMath: preserves $...$ while escaping
- Comprehensive test with 12/12 checks passing
- Compiles cleanly with pdflatex, generates colored PDF
- Added LaTeX option to export dropdown UI
- Uses currently selected color scheme from app

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: stared

index.html

@@ -62,6 +62,7 @@ <h1 id="equation-title">Interactive Equations</h1>
             <button id="export-btn" class="toolbar-btn" title="Export">Export as...</button>
             <div id="export-menu" class="export-menu" style="display: none;">
               <button class="export-option" data-format="html">HTML</button>
+              <button class="export-option" data-format="latex">LaTeX</button>
             </div>
           </div>
           <button id="copy-btn" class="toolbar-btn" title="Copy to clipboard">Copy</button>

src/exporter.ts

@@ -64,6 +64,48 @@ export function escapeLaTeX(text: string): string {
   return text.replace(/[\\{}$&%#_~^]/g, (char) => map[char]);
 }
 
+/**
+ * Escape LaTeX text while preserving inline math ($...$)
+ */
+function escapeLatexPreservingMath(text: string): string {
+  let result = '';
+  let i = 0;
+  let inMath = false;
+  let mathStart = -1;
+
+  while (i < text.length) {
+    if (text[i] === '$' && (i === 0 || text[i - 1] !== '\\')) {
+      if (!inMath) {
+        // Start of math
+        mathStart = i;
+        inMath = true;
+        result += '$'; // Keep the $ for math mode
+        i++;
+      } else {
+        // End of math - keep everything in math mode as-is
+        result += text.substring(mathStart + 1, i) + '$';
+        inMath = false;
+        i++;
+        mathStart = -1;
+      }
+    } else if (!inMath) {
+      // Outside math - escape special characters
+      result += escapeLaTeX(text[i]);
+      i++;
+    } else {
+      // Inside math - don't process yet, will be added when we hit closing $
+      i++;
+    }
+  }
+
+  // Handle unclosed math
+  if (inMath) {
+    result += escapeLaTeX(text.substring(mathStart));
+  }
+
+  return result;
+}
+
 /**
  * Get file extension for export format
  */
@@ -486,15 +528,220 @@ function renderInlineMath(text: string): string {
   return result;
 }
 
+/**
+ * Strip \htmlClass wrappers from LaTeX and replace with \textcolor
+ * Converts \htmlClass{term-X}{content} → \textcolor{termX}{content}
+ */
+function stripHtmlClassForLatex(latex: string): string {
+  let result = '';
+  let i = 0;
+
+  while (i < latex.length) {
+    // Look for \htmlClass{
+    if (latex.substring(i, i + 11) === '\\htmlClass{') {
+      // Find the closing }
+      const classStart = i + 11;
+      let classEnd = latex.indexOf('}', classStart);
+
+      if (classEnd === -1) {
+        // Malformed, just copy and continue
+        result += latex[i];
+        i++;
+        continue;
+      }
+
+      const fullClassName = latex.substring(classStart, classEnd);
+
+      // Check if it's a term-X class
+      if (!fullClassName.startsWith('term-')) {
+        // Not a term class, just copy
+        result += latex.substring(i, classEnd + 1);
+        i = classEnd + 1;
+        continue;
+      }
+
+      // Extract className from term-X
+      const className = fullClassName.substring(5); // Remove 'term-' prefix
+      const latexColorName = `term${className}`;
+
+      // Check if there's a { after }
+      if (latex[classEnd + 1] !== '{') {
+        // Malformed, just copy and continue
+        result += latex.substring(i, classEnd + 1);
+        i = classEnd + 1;
+        continue;
+      }
+
+      // Find the matching closing brace for content
+      const contentStart = classEnd + 2; // After }{
+      let braceCount = 1;
+      let contentEnd = contentStart;
+
+      while (contentEnd < latex.length && braceCount > 0) {
+        if (latex[contentEnd] === '{' && latex[contentEnd - 1] !== '\\') {
+          braceCount++;
+        } else if (latex[contentEnd] === '}' && latex[contentEnd - 1] !== '\\') {
+          braceCount--;
+        }
+        contentEnd++;
+      }
+
+      if (braceCount !== 0) {
+        // Unmatched braces, just copy and continue
+        result += latex.substring(i, contentStart);
+        i = contentStart;
+        continue;
+      }
+
+      // Extract content (excluding the final })
+      const content = latex.substring(contentStart, contentEnd - 1);
+
+      // Replace with \textcolor{termX}{content}
+      result += `\\textcolor{${latexColorName}}{${content}}`;
+
+      i = contentEnd;
+    } else {
+      result += latex[i];
+      i++;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Convert HTML description to LaTeX text
+ * Strips <span> tags and converts content to LaTeX
+ */
+function convertDescriptionToLatex(html: string): string {
+  let result = '';
+  let i = 0;
+
+  while (i < html.length) {
+    // Look for <span class="term-X">
+    if (html.substring(i, i + 18) === '<span class="term-') {
+      // Find the closing >
+      const tagEnd = html.indexOf('>', i);
+      if (tagEnd === -1) {
+        result += escapeLaTeX(html[i]);
+        i++;
+        continue;
+      }
+
+      // Extract class name
+      const tagContent = html.substring(i, tagEnd + 1);
+      const classMatch = tagContent.match(/class="term-([^"]+)"/);
+
+      if (!classMatch) {
+        result += escapeLaTeX(html.substring(i, tagEnd + 1));
+        i = tagEnd + 1;
+        continue;
+      }
+
+      const className = classMatch[1];
+      const latexColorName = `term${className}`;
+
+      // Find the closing </span>
+      const closeTag = '</span>';
+      const closeIndex = html.indexOf(closeTag, tagEnd + 1);
+
+      if (closeIndex === -1) {
+        result += escapeLaTeX(html.substring(i, tagEnd + 1));
+        i = tagEnd + 1;
+        continue;
+      }
+
+      // Extract content between tags
+      const content = html.substring(tagEnd + 1, closeIndex);
+
+      // Output colored text in LaTeX
+      result += `\\textcolor{${latexColorName}}{${escapeLaTeX(content)}}`;
+
+      i = closeIndex + closeTag.length;
+    } else if (html.substring(i, i + 3) === '<p>') {
+      // Skip <p> tags
+      i += 3;
+    } else if (html.substring(i, i + 4) === '</p>') {
+      // Replace </p> with paragraph break
+      result += '\n\n';
+      i += 4;
+    } else {
+      // Regular text - escape for LaTeX
+      result += escapeLaTeX(html[i]);
+      i++;
+    }
+  }
+
+  return result.trim();
+}
+
 /**
  * Export to LaTeX (complete document with xcolor)
- * Implementation: Commit 3
+ * Non-interactive: colors defined in preamble, applied with \textcolor
  */
 export function exportToLaTeX(
-  _content: ParsedContent,
-  _colorScheme: ColorScheme
+  content: ParsedContent,
+  colorScheme: ColorScheme
 ): string {
-  throw new Error('LaTeX export not yet implemented');
+  // Generate color definitions for preamble
+  const colorDefinitions = content.termOrder
+    .map((className) => {
+      const color = getTermColor(className, content.termOrder, colorScheme);
+      const latexColorName = `term${className}`;
+      // Convert #RRGGBB to uppercase hex for LaTeX
+      const hexColor = color.replace('#', '').toUpperCase();
+      return `\\definecolor{${latexColorName}}{HTML}{${hexColor}}`;
+    })
+    .join('\n');
+
+  // Convert LaTeX: replace \htmlClass{term-X}{content} with \textcolor{termX}{content}
+  const coloredLatex = stripHtmlClassForLatex(content.latex);
+
+  // Convert description: strip HTML tags, convert to LaTeX
+  const descriptionLatex = convertDescriptionToLatex(content.description);
+
+  // Convert definitions
+  const definitionsLatex = Array.from(content.definitions.entries())
+    .map(([className, definition]) => {
+      const latexColorName = `term${className}`;
+      // Definitions are plain text, but may contain inline math $...$ which should be kept as-is
+      // Escape text outside of math mode, keep math mode untouched
+      const definitionLatex = escapeLatexPreservingMath(definition);
+      return `\\subsection*{\\textcolor{${latexColorName}}{${escapeLaTeX(className)}}}\n${definitionLatex}`;
+    })
+    .join('\n\n');
+
+  return `\\documentclass{article}
+
+% Minimal preamble
+\\usepackage[T1]{fontenc}
+\\usepackage{amsmath}
+\\usepackage{xcolor}
+
+% Define colors from scheme
+${colorDefinitions}
+
+\\title{${escapeLaTeX(content.title || 'Mathematical Equation')}}
+\\date{}
+
+\\begin{document}
+\\maketitle
+
+\\section*{Equation}
+
+\\begin{equation}
+${coloredLatex}
+\\end{equation}
+
+\\section*{Description}
+
+${descriptionLatex}
+
+\\section*{Definitions}
+
+${definitionsLatex}
+
+\\end{document}`;
 }
 
 /**

test-latex-export-real.ts

@@ -0,0 +1,90 @@
+// Test LaTeX export with real equation file
+import { parseContent } from './src/parser';
+import { exportToLaTeX } from './src/exporter';
+import type { ColorScheme } from './src/exporter';
+import { writeFileSync, readFileSync } from 'fs';
+
+// Test color scheme
+const colorScheme: ColorScheme = {
+  name: 'viridis',
+  colors: ['#440154', '#31688e', '#35b779', '#fde724', '#20908d', '#5ec962', '#3b528b'],
+};
+
+async function testLatexExport() {
+  console.log('Testing LaTeX export with real equation file...\n');
+
+  // Load Euler's identity equation
+  const markdown = readFileSync('./public/examples/euler.md', 'utf-8');
+  const parsed = await parseContent(markdown);
+  console.log('✓ Content loaded successfully');
+  console.log(`  Title: ${parsed.title}`);
+  console.log(`  Terms: ${parsed.termOrder.join(', ')}`);
+  console.log(`  Definitions: ${parsed.definitions.size}\n`);
+
+  // Generate LaTeX export
+  const latex = exportToLaTeX(parsed, colorScheme);
+  console.log('✓ LaTeX export generated successfully\n');
+
+  // Validation checks
+  const checks = [
+    { name: 'Document class', test: () => latex.includes('\\documentclass{article}') },
+    { name: 'xcolor package', test: () => latex.includes('\\usepackage{xcolor}') },
+    { name: 'amsmath package', test: () => latex.includes('\\usepackage{amsmath}') },
+    { name: 'Color definitions exist', test: () => latex.includes('\\definecolor{term') },
+    { name: 'Colored equation terms', test: () => latex.includes('\\textcolor{term') },
+    { name: 'No \\htmlClass', test: () => !latex.includes('\\htmlClass') },
+    { name: 'Title present', test: () => latex.includes('Euler') },
+    { name: 'Description section', test: () => latex.includes('\\section*{Description}') },
+    { name: 'Definitions section', test: () => latex.includes('\\section*{Definitions}') },
+    { name: 'Document structure', test: () => latex.includes('\\begin{document}') && latex.includes('\\end{document}') },
+    { name: 'Equation environment', test: () => latex.includes('\\begin{equation}') && latex.includes('\\end{equation}') },
+    { name: 'Equation not empty', test: () => {
+      const eqMatch = latex.match(/\\begin\{equation\}(.+?)\\end\{equation\}/s);
+      return eqMatch && eqMatch[1].trim().length > 0;
+    }},
+  ];
+
+  let passed = 0;
+  let failed = 0;
+
+  checks.forEach((check) => {
+    try {
+      if (check.test()) {
+        console.log(`  ✓ ${check.name}`);
+        passed++;
+      } else {
+        console.log(`  ✗ ${check.name}`);
+        failed++;
+      }
+    } catch (error) {
+      console.log(`  ✗ ${check.name} (error: ${error})`);
+      failed++;
+    }
+  });
+
+  console.log(`\n${passed}/${checks.length} checks passed\n`);
+
+  // Write to file for manual inspection
+  const outputPath = '/tmp/test-euler-export.tex';
+  writeFileSync(outputPath, latex);
+  console.log(`LaTeX output written to: ${outputPath}`);
+  console.log('You can compile it with: pdflatex /tmp/test-euler-export.tex\n');
+
+  // Show first few lines
+  console.log('First 40 lines of LaTeX output:');
+  console.log('---');
+  console.log(latex.split('\n').slice(0, 40).join('\n'));
+  console.log('...\n');
+
+  if (failed > 0) {
+    console.error(`❌ ${failed} checks failed`);
+    process.exit(1);
+  } else {
+    console.log('✅ All checks passed!');
+  }
+}
+
+testLatexExport().catch((error) => {
+  console.error('Test failed:', error);
+  process.exit(1);
+});