feat(ui): rendering of some latex formulas

Author: adirochs

apps/codever-ui/src/app/core/markdown/markdown.service.spec.ts

@@ -18,6 +18,25 @@ describe('Markdown transformer service', () => {
     );
   });
 
+  it('should preserve multiline equations through Markdown and sanitization', () => {
+    const math = String.raw`\delta^{m+1}
+=
+\frac{\partial L}{\partial z^{m+1}}
+=
+\frac{\partial L}{\partial a^{m+1}}
+\odot
+\phi'_{m+1}(z^{m+1})`;
+    const container = document.createElement('div');
+    container.innerHTML = markdownService.toHtml(`\\[\n${math}\n\\]`);
+
+    expect(container.querySelectorAll('.katex').length).toBe(1);
+    expect(container.querySelector('annotation')?.textContent).toBe(math);
+    expect(container.querySelector('.katex-html')).not.toBeNull();
+    expect(container.querySelector('h1')).toBeNull();
+    expect(container.querySelector('.katex-error')).toBeNull();
+    expect(container.textContent).not.toContain('CODEVERMATH');
+  });
+
   it('should generate hyperlinks', () => {
     expect(
       markdownService.toHtml('[Codingpedia](http://www.codingpedia.org)')

apps/codever-ui/src/app/core/markdown/markdown.service.ts

@@ -2,8 +2,7 @@ import { Injectable } from '@angular/core';
 
 import DOMPurify from 'dompurify';
 
-import { marked } from 'marked';
-import { renderLatex } from '../../shared/render-latex.util';
+import { renderMarkdownWithLatex } from '../../shared/render-latex.util';
 
 // DOMPurify config that allows KaTeX-generated MathML elements
 const KATEX_SANITIZE_CONFIG = {
@@ -27,7 +26,6 @@ export class MarkdownService {
   // converter object is not typescript
 
   toHtml(text: string) {
-    const withLatex = renderLatex(text);
-    return DOMPurify.sanitize(marked.parse(withLatex), KATEX_SANITIZE_CONFIG);
+    return DOMPurify.sanitize(renderMarkdownWithLatex(text), KATEX_SANITIZE_CONFIG);
   }
 }

apps/codever-ui/src/app/shared/notebook-renderer/notebook-renderer.component.ts

@@ -7,10 +7,9 @@ import {
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import DOMPurify from 'dompurify';
-import { marked } from 'marked';
 import hljs from 'highlight.js';
 import katex from 'katex';
-import { renderLatex } from '../render-latex.util';
+import { renderMarkdownWithLatex } from '../render-latex.util';
 import { CopyCodeButtonDirective } from '../directive/copy-code-button.directive';
 import { NgClass } from '@angular/common';
 
@@ -86,14 +85,11 @@ export class NotebookRendererComponent implements OnChanges {
     const source = this.joinSource(cell.source);
 
     if (cell.cell_type === 'markdown') {
-      // Pre-process LaTeX math ($...$, $$...$$, \(...\), \[...\]) before
-      // passing through marked, so that _ and other TeX chars aren't mangled.
-      const withLatex = renderLatex(source);
       return {
         type: 'markdown',
         executionCount: null,
         sourceHtml: this.trustHtml(
-          this.sanitizeWithKatex(marked.parse(withLatex))
+          this.sanitizeWithKatex(renderMarkdownWithLatex(source))
         ),
         outputs: [],
       };

apps/codever-ui/src/app/shared/pipe/markdown2html.pipe.ts

@@ -4,7 +4,7 @@ import DOMPurify from 'dompurify';
 
 import { marked } from 'marked';
 import hljs from 'highlight.js';
-import { renderLatex } from '../render-latex.util';
+import { renderMarkdownWithLatex } from '../render-latex.util';
 
 // Custom renderer to apply highlight.js syntax highlighting to fenced code blocks
 // and add the 'hljs' CSS class so the github-dark theme (included in angular.json) is applied
@@ -137,10 +137,8 @@ export class Markdown2HtmlPipe implements PipeTransform {
   transform(text: string): SafeHtml {
     // Reset the per-note task counter so reset-button indices start at 0.
     renderedTaskCount = 0;
-    // Pre-process LaTeX math delimiters before markdown parsing
-    const withLatex = renderLatex(text);
     const clean = DOMPurify.sanitize(
-      marked.parse(withLatex),
+      renderMarkdownWithLatex(text),
       KATEX_SANITIZE_CONFIG
     );
     // Bypass Angular's built-in sanitizer which strips inline style attributes

apps/codever-ui/src/app/shared/render-latex.util.spec.ts

@@ -1,4 +1,75 @@
-import { renderLatex } from './render-latex.util';
+import katex from 'katex';
+import { renderLatex, renderMarkdownWithLatex } from './render-latex.util';
+
+describe('renderMarkdownWithLatex', () => {
+  const derivative = String.raw`\frac{\partial L}{\partial b_i^l}
+=
+\frac{\partial L}{\partial z_i^l}
+\cdot 1
+=
+\delta_i^l`;
+
+  for (const [open, close] of [['\\[', '\\]'], ['$$', '$$']]) {
+    it(`should preserve multiline math HTML with ${open} delimiters`, () => {
+      const result = renderMarkdownWithLatex(
+        `${open}\n${derivative}\n${close}`
+      );
+      const expected = katex.renderToString(derivative, {
+        displayMode: true,
+        throwOnError: true,
+      });
+
+      expect(result).toContain(expected);
+      expect(result).not.toContain('<h1');
+      expect(result).not.toContain('<em>');
+    });
+  }
+
+  it('should preserve math in headings, emphasis, and list items', () => {
+    const math = String.raw`a_i^l = \phi_l(z_i^l)`;
+    const expected = katex.renderToString(math);
+    const result = renderMarkdownWithLatex(
+      `## Activation \\(${math}\\)\n\n**\\(${math}\\)**\n\n- \\(${math}\\)`
+    );
+    const container = document.createElement('div');
+    container.innerHTML = result;
+
+    expect(container.querySelector('h2 .katex')).not.toBeNull();
+    expect(container.querySelector('strong .katex')).not.toBeNull();
+    expect(container.querySelector('li .katex')).not.toBeNull();
+    expect(result.split(expected).length - 1).toBe(3);
+  });
+
+  it('should leave Markdown-like math text intact', () => {
+    const math = String.raw`\text{a * b * c and $x^2$}`;
+    expect(renderMarkdownWithLatex(`\\(${math}\\)`)).toContain(
+      katex.renderToString(math)
+    );
+  });
+
+  it('should preserve code, currency, and ordinary Markdown', () => {
+    const result = renderMarkdownWithLatex(
+      '# Title\n\n**Bold** costs $5 or $40.\n\n' +
+      '`\\(x^2\\)`\n\n```tex\n\\[x^2\\]\n```\n\n\\(y^2\\)'
+    );
+
+    expect(result).toContain('<h1');
+    expect(result).toContain('<strong>Bold</strong>');
+    expect(result).toContain('costs $5 or $40.');
+    expect(result).toContain('<code>\\(x^2\\)</code>');
+    expect(result).toContain('\\[x^2\\]');
+    expect((result.match(/class="katex"/g) || []).length).toBe(1);
+  });
+
+  it('should not replace user text that resembles a math placeholder', () => {
+    const result = renderMarkdownWithLatex(
+      'CODEVERMATH0END CODEVERMATHX0END \\(x^2\\)'
+    );
+
+    expect(result).toContain('CODEVERMATH0END CODEVERMATHX0END');
+    expect(result).toContain(katex.renderToString('x^2'));
+  });
+});
 
 describe('renderLatex', () => {
   // ---------------------------------------------------------------------------
@@ -207,4 +278,3 @@ describe('renderLatex', () => {
     expect(result).toBe(input);
   });
 });
-

apps/codever-ui/src/app/shared/render-latex.util.ts

@@ -1,8 +1,32 @@
 import katex from 'katex';
+import { marked } from 'marked';
+
+/**
+ * Keep generated math HTML (including its multiline TeX annotation) opaque to
+ * Markdown, then restore it before the caller sanitizes the complete HTML.
+ */
+export function renderMarkdownWithLatex(text: string): string {
+  let prefix = 'CODEVERMATH';
+  while (text?.includes(prefix)) {
+    prefix += 'X';
+  }
+
+  const expressions: string[] = [];
+  const protectedMarkdown = replaceLatex(text, (latex, displayMode) => {
+    const index = expressions.push(renderKatex(latex, displayMode)) - 1;
+    return `${prefix}${index}END`;
+  });
+  const html = marked.parse(protectedMarkdown);
+  return html.replace(
+    new RegExp(`${prefix}(\\d+)END`, 'g'),
+    (_match, index) => expressions[Number(index)]
+  );
+}
 
 /**
  * Pre-processes a Markdown/text string and replaces LaTeX math delimiters
- * with KaTeX-rendered HTML **before** the string is passed to `marked`.
+ * with KaTeX-rendered HTML. For Markdown, use renderMarkdownWithLatex instead
+ * so Markdown syntax inside math cannot corrupt the generated HTML.
  *
  * Supports:
  *  - Display math:  $$...$$ and \[...\]
@@ -12,6 +36,13 @@ import katex from 'katex';
  * so that dollar signs inside code are not treated as math delimiters.
  */
 export function renderLatex(text: string): string {
+  return replaceLatex(text, renderKatex);
+}
+
+function replaceLatex(
+  text: string,
+  renderMath: (latex: string, displayMode: boolean) => string
+): string {
   if (!text) {
     return text;
   }
@@ -32,17 +63,17 @@ export function renderLatex(text: string): string {
 
     // Display math: $$...$$  (must come before inline $ to avoid conflicts)
     segment = segment.replace(/\$\$([\s\S]+?)\$\$/g, (_match, math) => {
-      return renderKatex(math.trim(), true);
+      return renderMath(math.trim(), true);
     });
 
     // Display math: \[...\]
     segment = segment.replace(/\\\[([\s\S]+?)\\\]/g, (_match, math) => {
-      return renderKatex(math.trim(), true);
+      return renderMath(math.trim(), true);
     });
 
     // Inline math: \(...\)
     segment = segment.replace(/\\\(([\s\S]+?)\\\)/g, (_match, math) => {
-      return renderKatex(math.trim(), false);
+      return renderMath(math.trim(), false);
     });
 
     // Inline math: $...$
@@ -58,7 +89,7 @@ export function renderLatex(text: string): string {
     segment = segment.replace(
       /(?<![\\$])\$(?!\$)(\S(?:[^$\\\n]|\\.)*?\S|\S)\$(?!\d)/g,
       (match, math) => {
-        return hasTexSignal(math) ? renderKatex(math.trim(), false) : match;
+        return hasTexSignal(math) ? renderMath(math.trim(), false) : match;
       }
     );
 
@@ -104,4 +135,3 @@ function renderKatex(latex: string, displayMode: boolean): string {
     return `<code class="katex-error" title="KaTeX parse error">${escaped}</code>`;
   }
 }
-