Merge codeblock syntax highlighting. panphora/overtype#35

Author: WebsByTodd

browser-extension/src/overtype/overtype.js

@@ -169,6 +169,7 @@ class OverType {
       toolbar: false,
       statsFormatter: null,
       smartLists: true, // Enable smart list continuation
+      codeHighlighter: null, // Per-instance code highlighter
     };
 
     // Remove theme and colors from options - these are now global
@@ -475,7 +476,8 @@ class OverType {
     const html = MarkdownParser.parse(
       text,
       activeLine,
-      this.options.showActiveLineRaw
+      this.options.showActiveLineRaw,
+      this.options.codeHighlighter
     );
     this.preview.innerHTML =
       html || '<span style="color: #808080;">Start typing...</span>';
@@ -819,11 +821,16 @@ class OverType {
    */
   getRenderedHTML(processForPreview = false) {
     const markdown = this.getValue();
-    let html = MarkdownParser.parse(markdown);
+    let html = MarkdownParser.parse(
+      markdown,
+      -1,
+      false,
+      this.options.codeHighlighter
+    );
 
     if (processForPreview) {
       // Post-process HTML for preview mode
-      html = MarkdownParser.postProcessHTML(html);
+      html = MarkdownParser.postProcessHTML(html, this.options.codeHighlighter);
     }
 
     return html;
@@ -869,6 +876,15 @@ class OverType {
     this.updatePreview();
   }
 
+  /**
+   * Set instance-specific code highlighter
+   * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+   */
+  setCodeHighlighter(highlighter) {
+    this.options.codeHighlighter = highlighter;
+    this.updatePreview();
+  }
+
   /**
    * Update stats bar
    * @private
@@ -1144,6 +1160,22 @@ class OverType {
     OverType.stylesInjected = true;
   }
 
+  /**
+   * Set global code highlighter for all OverType instances
+   * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+   */
+  static setCodeHighlighter(highlighter) {
+    MarkdownParser.setCodeHighlighter(highlighter);
+
+    // Update all existing instances
+    document.querySelectorAll(".overtype-wrapper").forEach((wrapper) => {
+      const instance = wrapper._instance;
+      if (instance && instance.updatePreview) {
+        instance.updatePreview();
+      }
+    });
+  }
+
   /**
    * Set global theme for all OverType instances
    * @param {string|Object} theme - Theme name or custom theme object

browser-extension/src/overtype/parser.js

@@ -10,13 +10,24 @@ export class MarkdownParser {
   // Track link index for anchor naming
   static linkIndex = 0;
 
+  // Global code highlighter function
+  static codeHighlighter = null;
+
   /**
    * Reset link index (call before parsing a new document)
    */
   static resetLinkIndex() {
     this.linkIndex = 0;
   }
 
+  /**
+   * Set global code highlighter function
+   * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
+   */
+  static setCodeHighlighter(highlighter) {
+    this.codeHighlighter = highlighter;
+  }
+
   /**
    * Escape HTML special characters
    * @param {string} text - Raw text to escape
@@ -323,9 +334,15 @@ export class MarkdownParser {
    * @param {string} text - Full markdown text
    * @param {number} activeLine - Currently active line index (optional)
    * @param {boolean} showActiveLineRaw - Show raw markdown on active line
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional)
    * @returns {string} Parsed HTML
    */
-  static parse(text, activeLine = -1, showActiveLineRaw = false) {
+  static parse(
+    text,
+    activeLine = -1,
+    showActiveLineRaw = false,
+    instanceHighlighter = null
+  ) {
     // Reset link counter for each parse
     this.resetLinkIndex();
 
@@ -362,19 +379,20 @@ export class MarkdownParser {
     const html = parsedLines.join("");
 
     // Apply post-processing for list consolidation
-    return this.postProcessHTML(html);
+    return this.postProcessHTML(html, instanceHighlighter);
   }
 
   /**
    * Post-process HTML to consolidate lists and code blocks
    * @param {string} html - HTML to post-process
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional)
    * @returns {string} Post-processed HTML with consolidated lists and code blocks
    */
-  static postProcessHTML(html) {
+  static postProcessHTML(html, instanceHighlighter = null) {
     // Check if we're in a browser environment
     if (typeof document === "undefined" || !document) {
       // In Node.js environment - do manual post-processing
-      return this.postProcessHTMLManual(html);
+      return this.postProcessHTMLManual(html, instanceHighlighter);
     }
 
     // Parse HTML string into DOM
@@ -421,9 +439,29 @@ export class MarkdownParser {
 
             // Store reference to the code element for adding content
             currentCodeBlock._codeElement = codeElement;
+            currentCodeBlock._language = lang;
+            currentCodeBlock._codeContent = "";
             continue;
           } else {
-            // End of code block - fence stays visible
+            // End of code block - apply highlighting if needed
+            const highlighter = instanceHighlighter || this.codeHighlighter;
+            if (
+              currentCodeBlock &&
+              highlighter &&
+              currentCodeBlock._codeContent
+            ) {
+              try {
+                const highlightedCode = highlighter(
+                  currentCodeBlock._codeContent,
+                  currentCodeBlock._language || ""
+                );
+                currentCodeBlock._codeElement.innerHTML = highlightedCode;
+              } catch (error) {
+                console.warn("Code highlighting failed:", error);
+                // Keep the plain text content as fallback
+              }
+            }
+
             inCodeBlock = false;
             currentCodeBlock = null;
             continue;
@@ -441,14 +479,18 @@ export class MarkdownParser {
         const codeElement =
           currentCodeBlock._codeElement ||
           currentCodeBlock.querySelector("code");
-        // Add the line content to the code block
-        if (codeElement.textContent.length > 0) {
-          codeElement.textContent += "\n";
+        // Add the line content to the code block content (for highlighting)
+        if (currentCodeBlock._codeContent.length > 0) {
+          currentCodeBlock._codeContent += "\n";
         }
         // Get the actual text content, preserving spaces
-        // Use textContent instead of innerHTML to avoid double-escaping
-        // textContent automatically decodes HTML entities
         const lineText = child.textContent.replace(/\u00A0/g, " "); // \u00A0 is nbsp
+        currentCodeBlock._codeContent += lineText;
+
+        // Also add to the code element (fallback if no highlighter)
+        if (codeElement.textContent.length > 0) {
+          codeElement.textContent += "\n";
+        }
         codeElement.textContent += lineText;
         child.remove();
         continue;
@@ -498,9 +540,10 @@ export class MarkdownParser {
   /**
    * Manual post-processing for Node.js environments (without DOM)
    * @param {string} html - HTML to post-process
+   * @param {Function} instanceHighlighter - Instance-specific code highlighter (optional)
    * @returns {string} Post-processed HTML
    */
-  static postProcessHTMLManual(html) {
+  static postProcessHTMLManual(html, instanceHighlighter = null) {
     let processed = html;
 
     // Process unordered lists
@@ -549,10 +592,22 @@ export class MarkdownParser {
         const lang = openFence.slice(3).trim();
         const langClass = lang ? ` class="language-${lang}"` : "";
 
+        // Apply code highlighting if available
+        let highlightedContent = codeContent;
+        const highlighter = instanceHighlighter || this.codeHighlighter;
+        if (highlighter) {
+          try {
+            highlightedContent = highlighter(codeContent, lang);
+          } catch (error) {
+            console.warn("Code highlighting failed:", error);
+            // Fall back to original content
+          }
+        }
+
         // Keep fence markers visible as separate divs, with pre/code block between them
         let result = `<div><span class="code-fence">${openFence}</span></div>`;
-        // Content is already escaped, don't double-escape
-        result += `<pre class="code-block"><code${langClass}>${codeContent}</code></pre>`;
+        // Use highlighted content if available, otherwise use escaped content
+        result += `<pre class="code-block"><code${langClass}>${highlightedContent}</code></pre>`;
         result += `<div><span class="code-fence">${closeFence}</span></div>`;
 
         return result;