Add interactive markdown editor with real-time preview

Implement collapsible right sidebar editor with syntax highlighting
and live equation preview. Users can now edit equations in real-time
and contribute new equations via pull requests.

Features:
- CodeJar + Prism.js editor (~4.5KB total, minimal bundle impact)
- Custom syntax highlighting for \mark[], []{.class}, ## .class
- Term colors in editor match equation color scheme
- Real-time preview with 500ms debouncing
- Two modes:
  * Existing equation: collapsed by default, loads current markdown
  * New equation: visible by default with template
- Download markdown as .md file
- Contribute workflow instructions for GitHub PR submission
- Responsive: collapses to horizontal bar on mobile
- Smooth animations and Tufte-style minimal design

Technical changes:
- Add CodeJar and Prism.js dependencies
- Create src/prism-custom.ts with custom language definition
- Update parser.ts to support parsing from string
- Extend main.ts with editor initialization and controls
- Add three-column layout CSS with collapse transitions
- Add toolbar with toggle, new, download, contribute buttons

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

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

Author: stared

index.html

@@ -39,6 +39,18 @@ <h1 id="equation-title">Interactive Equations</h1>
           </p>
         </footer>
       </main>
+
+      <aside id="editor-sidebar" class="editor-sidebar collapsed">
+        <div class="editor-toolbar">
+          <button id="toggle-editor-btn" class="toolbar-btn" title="Show/hide editor">
+            <span class="icon">◀</span>
+          </button>
+          <button id="new-equation-btn" class="toolbar-btn" title="Create new equation">New</button>
+          <button id="download-btn" class="toolbar-btn" title="Download markdown">Download</button>
+          <button id="contribute-btn" class="toolbar-btn" title="Contribute to repository">Contribute</button>
+        </div>
+        <div id="editor-container" class="editor-container"></div>
+      </aside>
     </div>
     <script type="module" src="/src/main.ts"></script>
   </body>

package.json

@@ -29,6 +29,8 @@
     "vite": "^7.1.12"
   },
   "dependencies": {
-    "katex": "^0.16.25"
+    "codejar": "^4.3.0",
+    "katex": "^0.16.25",
+    "prismjs": "^1.30.0"
   }
 }

pnpm-lock.yaml

@@ -1,6 +1,10 @@
 import katex from 'katex';
 import './style.css';
 import { loadContent, type ParsedContent } from './parser';
+import { CodeJar } from 'codejar';
+import Prism from 'prismjs';
+import './prism-custom';
+import { applyTermColors } from './prism-custom';
 
 // Equation metadata
 interface EquationInfo {
@@ -65,6 +69,12 @@ const colorSchemes: Record<string, ColorScheme> = {
 let currentScheme = 'vibrant';
 let parsedContent: ParsedContent | null = null;
 
+// Editor state
+let editor: any = null;
+let isNewEquationMode = false;
+let currentMarkdown = '';
+let previewTimeout: number | null = null;
+
 function applyColorScheme(schemeName: string) {
   const scheme = colorSchemes[schemeName];
   if (!scheme || !parsedContent) return;
@@ -252,6 +262,11 @@ async function loadEquation(equationId: string, updateHash = true) {
       }
     });
   }
+
+  // Load markdown into editor (for existing equation mode)
+  if (!isNewEquationMode) {
+    await loadMarkdownIntoEditor(`./examples/${equation.file}`);
+  }
 }
 
 // Create equation selector buttons
@@ -285,6 +300,209 @@ window.addEventListener('hashchange', async () => {
   await loadEquation(equationId, false); // Don't update hash again
 });
 
+// Editor functions
+function highlightEditor(editorElement: HTMLElement) {
+  // Use Prism to highlight
+  editorElement.innerHTML = Prism.highlight(
+    editorElement.textContent || '',
+    Prism.languages.eqmd,
+    'eqmd'
+  );
+
+  // Apply term colors if we have parsed content
+  if (parsedContent) {
+    applyTermColors(editorElement, parsedContent.termOrder, colorSchemes[currentScheme].colors);
+  }
+}
+
+function initializeEditor() {
+  const editorContainer = document.getElementById('editor-container');
+  if (!editorContainer) return;
+
+  // Create code element for CodeJar
+  const codeElement = document.createElement('code');
+  codeElement.className = 'language-eqmd';
+  editorContainer.appendChild(codeElement);
+
+  // Initialize CodeJar with Prism highlighting
+  editor = CodeJar(codeElement, highlightEditor, {
+    tab: '  ', // 2 spaces for tab
+    indentOn: /[({[]$/,
+  });
+
+  // Update preview on change (debounced)
+  editor.onUpdate((code: string) => {
+    currentMarkdown = code;
+
+    // Clear previous timeout
+    if (previewTimeout !== null) {
+      clearTimeout(previewTimeout);
+    }
+
+    // Debounce: update after 500ms of inactivity
+    previewTimeout = window.setTimeout(async () => {
+      await updatePreview();
+    }, 500);
+  });
+}
+
+async function updatePreview() {
+  if (!currentMarkdown.trim()) return;
+
+  try {
+    // Parse markdown content
+    parsedContent = await loadContent(currentMarkdown, true); // true = from string
+
+    // Clear and re-render
+    const equationContainer = document.getElementById('equation-container');
+    const descriptionContainer = document.getElementById('static-description');
+    const hoverContainer = document.getElementById('hover-explanation');
+
+    if (equationContainer) equationContainer.innerHTML = '';
+    if (descriptionContainer) descriptionContainer.innerHTML = '';
+    if (hoverContainer) {
+      hoverContainer.innerHTML = '';
+      hoverContainer.classList.remove('visible');
+    }
+
+    // Render content
+    renderEquation();
+    renderDescription();
+
+    // Apply colors
+    applyColorScheme(currentScheme);
+
+    // Setup hover effects
+    setupHoverEffects();
+
+    // Update editor highlighting with new colors
+    const codeElement = document.querySelector('#editor-container code') as HTMLElement;
+    if (codeElement) {
+      highlightEditor(codeElement);
+    }
+  } catch (error) {
+    console.error('Failed to parse markdown:', error);
+    // Could show error message to user
+  }
+}
+
+async function loadMarkdownIntoEditor(url: string) {
+  try {
+    const response = await fetch(url);
+    const markdown = await response.text();
+    currentMarkdown = markdown;
+
+    if (editor) {
+      editor.updateCode(markdown);
+    }
+  } catch (error) {
+    console.error('Failed to load markdown:', error);
+  }
+}
+
+function setupEditorControls() {
+  // Toggle editor collapse/expand
+  const toggleBtn = document.getElementById('toggle-editor-btn');
+  const editorSidebar = document.getElementById('editor-sidebar');
+
+  if (toggleBtn && editorSidebar) {
+    toggleBtn.addEventListener('click', () => {
+      editorSidebar.classList.toggle('collapsed');
+    });
+  }
+
+  // New equation mode toggle
+  const newEquationBtn = document.getElementById('new-equation-btn');
+  if (newEquationBtn && editorSidebar) {
+    newEquationBtn.addEventListener('click', () => {
+      isNewEquationMode = !isNewEquationMode;
+
+      if (isNewEquationMode) {
+        // Switch to new mode: show editor, load template
+        editorSidebar.classList.remove('collapsed');
+        newEquationBtn.textContent = 'Exit New Mode';
+
+        // Load template
+        const template = `# Equation
+
+$$
+\\mark[term1]{E} = \\mark[term2]{m} \\mark[term3]{c^2}
+$$
+
+# Description
+
+The famous [mass-energy equivalence]{.term2}: [energy]{.term1} equals [mass]{.term2} times the [speed of light]{.term3} squared.
+
+## .term1
+
+Energy (E) is the capacity to do work, measured in joules.
+
+## .term2
+
+Mass (m) is the amount of matter in an object, measured in kilograms.
+
+## .term3
+
+The speed of light (c) is approximately 299,792,458 meters per second.
+`;
+        currentMarkdown = template;
+        if (editor) {
+          editor.updateCode(template);
+        }
+      } else {
+        // Exit new mode: reload current equation
+        newEquationBtn.textContent = 'New';
+        if (currentEquationId) {
+          loadEquation(currentEquationId);
+        }
+      }
+    });
+  }
+
+  // Download markdown
+  const downloadBtn = document.getElementById('download-btn');
+  if (downloadBtn) {
+    downloadBtn.addEventListener('click', () => {
+      const markdown = currentMarkdown || '';
+      const blob = new Blob([markdown], { type: 'text/markdown' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = isNewEquationMode ? 'new-equation.md' : `${currentEquationId}.md`;
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+  }
+
+  // Contribute instructions
+  const contributeBtn = document.getElementById('contribute-btn');
+  if (contributeBtn) {
+    contributeBtn.addEventListener('click', () => {
+      showContributeInstructions();
+    });
+  }
+}
+
+function showContributeInstructions() {
+  const instructions = `To contribute your equation to the repository:
+
+1. Download your markdown file using the Download button
+2. Fork the repository: https://github.com/stared/equations-explained-colorfully
+3. Add your .md file to the public/examples/ directory
+4. Add an entry to public/examples/equations.json:
+   {
+     "id": "your-equation-id",
+     "title": "Your Equation Name",
+     "category": "Field (e.g., Physics, Math)",
+     "file": "your-file.md"
+   }
+5. Submit a pull request with your changes
+
+Thank you for contributing!`;
+
+  alert(instructions);
+}
+
 // Initialize - load content and render
 document.addEventListener('DOMContentLoaded', async () => {
   try {
@@ -297,6 +515,10 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Create color scheme switcher
     createColorSchemeSwitcher();
 
+    // Initialize editor
+    initializeEditor();
+    setupEditorControls();
+
     // Load equation from URL hash or default
     const initialEquation = getEquationFromHash();
     await loadEquation(initialEquation);

src/main.ts

@@ -167,10 +167,16 @@ export function parseContent(markdown: string): ParsedContent {
 }
 
 /**
- * Load and parse content from a markdown file
+ * Load and parse content from a markdown file or string
  */
-export async function loadContent(path: string): Promise<ParsedContent> {
-  const response = await fetch(path);
-  const markdown = await response.text();
-  return parseContent(markdown);
+export async function loadContent(pathOrMarkdown: string, fromString = false): Promise<ParsedContent> {
+  if (fromString) {
+    // Parse directly from string
+    return parseContent(pathOrMarkdown);
+  } else {
+    // Fetch from URL and parse
+    const response = await fetch(pathOrMarkdown);
+    const markdown = await response.text();
+    return parseContent(markdown);
+  }
 }