Sanitize and expose statement HTML for math rendering; add client-side math renderer

src/components/ProblemWorkspace.css

@@ -355,3 +355,16 @@
 .problem-workspace-stmt-text sub {
   white-space: nowrap;
 }
+
+.problem-workspace-math {
+  display: inline-block;
+  font-family: Georgia, 'Times New Roman', serif;
+  font-style: italic;
+  white-space: nowrap;
+}
+
+.problem-workspace-math sup,
+.problem-workspace-math sub {
+  font-size: 0.72em;
+  line-height: 0;
+}

src/components/ProblemWorkspace.jsx

@@ -5,6 +5,7 @@ import {
   getDraftStorageKey,
   parseProblemWorkspaceQuery,
 } from '../utils/problemWorkspace';
+import { renderMathInHtml, textToHtml } from '../utils/renderMath';
 import './ProblemWorkspace.css';
 
 const DEFAULT_KOTLIN_STARTER = `fun main() {
@@ -21,16 +22,14 @@ function loadDraft(storageKey) {
 }
 
 function StatementHtml({ html, fallback }) {
-  if (html) {
-    return (
-      <div
-        className="problem-workspace-stmt-text"
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    );
-  }
+  const renderedHtml = renderMathInHtml(html || textToHtml(fallback));
 
-  return <p className="problem-workspace-stmt-text">{fallback}</p>;
+  return (
+    <div
+      className="problem-workspace-stmt-text"
+      dangerouslySetInnerHTML={{ __html: renderedHtml }}
+    />
+  );
 }
 
 function ProblemWorkspace() {

src/utils/renderMath.js

@@ -0,0 +1,49 @@
+export function escapeHtml(value) {
+  return String(value)
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function normalizeLatex(latex) {
+  return latex
+    .replace(/\\\\/g, '\\')
+    .replace(/\\(?:ldots|dots|cdots)/g, '…')
+    .replace(/\\leq?/g, '≤')
+    .replace(/\\geq?/g, '≥')
+    .replace(/\\ne(?:q)?/g, '≠')
+    .replace(/\\cdot/g, '·')
+    .replace(/\\times/g, '×')
+    .replace(/\\oplus/g, '⊕')
+    .replace(/\\infty/g, '∞')
+    .replace(/\\sum/g, '∑')
+    .replace(/\\min/g, 'min')
+    .replace(/\\max/g, 'max')
+    .replace(/\\left|\\right/g, '')
+    .replace(/\\,/g, ' ')
+    .replace(/\\ /g, ' ');
+}
+
+export function renderMathExpression(latex) {
+  let rendered = escapeHtml(normalizeLatex(latex).trim());
+
+  rendered = rendered.replace(/\^\{([^{}]+)\}/g, '<sup>$1</sup>');
+  rendered = rendered.replace(/_\{([^{}]+)\}/g, '<sub>$1</sub>');
+  rendered = rendered.replace(/\^([A-Za-z0-9+-])/g, '<sup>$1</sup>');
+  rendered = rendered.replace(/_([A-Za-z0-9+-])/g, '<sub>$1</sub>');
+
+  return `<span class="problem-workspace-math" aria-label="${escapeHtml(latex.trim())}">${rendered}</span>`;
+}
+
+export function renderMathInHtml(html) {
+  return html.replace(/\${1,3}([\s\S]*?)\${1,3}/g, (_, latex) => renderMathExpression(latex));
+}
+
+export function textToHtml(text) {
+  return escapeHtml(text)
+    .split(/\n{2,}/)
+    .map(paragraph => `<p>${paragraph.replaceAll('\n', '<br>')}</p>`)
+    .join('');
+}

src/utils/renderMath.test.js

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { renderMathInHtml, textToHtml } from './renderMath.js';
+
+describe('renderMathInHtml', () => {
+  it('renders Codeforces triple-dollar math delimiters', () => {
+    const html = renderMathInHtml('<p>There are $$$n+1$$$ vertices.</p>');
+
+    expect(html).toContain('<span class="problem-workspace-math"');
+    expect(html).toContain('n+1');
+    expect(html).not.toContain('$$$');
+  });
+
+  it('renders common Codeforces latex commands and superscripts', () => {
+    const html = renderMathInHtml('<p>Range $$$0,1,\\dots,n^2$$$.</p>');
+
+    expect(html).toContain('0,1,…,n<sup>2</sup>');
+  });
+
+  it('escapes plain-text fallbacks before adding paragraph markup', () => {
+    expect(textToHtml('<script>x</script>\n\nnext')).toBe(
+      '<p>&lt;script&gt;x&lt;/script&gt;</p><p>next</p>',
+    );
+  });
+});