Merge PR Dimillian#587: optional LaTeX math rendering

Author: mhulden

package-lock.json

@@ -47,12 +47,15 @@
     "@tauri-apps/plugin-updater": "^2.10.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
+    "katex": "^0.16.44",
     "lucide-react": "^0.562.0",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "tauri-plugin-liquid-glass-api": "^0.1.6",
     "vscode-material-icons": "^0.1.1"
   },

package.json

@@ -499,6 +499,11 @@ pub(crate) struct AppSettings {
         rename = "showMessageFilePath"
     )]
     pub(crate) show_message_file_path: bool,
+    #[serde(
+        default = "default_math_rendering_enabled",
+        rename = "mathRenderingEnabled"
+    )]
+    pub(crate) math_rendering_enabled: bool,
     #[serde(
         default = "default_chat_history_scrollback_items",
         rename = "chatHistoryScrollbackItems"
@@ -715,6 +720,10 @@ fn default_show_message_file_path() -> bool {
     true
 }
 
+fn default_math_rendering_enabled() -> bool {
+    false
+}
+
 fn default_chat_history_scrollback_items() -> Option<u32> {
     Some(200)
 }
@@ -1157,6 +1166,7 @@ impl Default for AppSettings {
             theme: default_theme(),
             usage_show_remaining: default_usage_show_remaining(),
             show_message_file_path: default_show_message_file_path(),
+            math_rendering_enabled: default_math_rendering_enabled(),
             chat_history_scrollback_items: default_chat_history_scrollback_items(),
             thread_title_autogeneration_enabled: false,
             automatic_app_update_checks_enabled: true,
@@ -1323,6 +1333,7 @@ mod tests {
         assert_eq!(settings.theme, "system");
         assert!(!settings.usage_show_remaining);
         assert!(settings.show_message_file_path);
+        assert!(!settings.math_rendering_enabled);
         assert_eq!(settings.chat_history_scrollback_items, Some(200));
         assert!(!settings.thread_title_autogeneration_enabled);
         assert!(settings.automatic_app_update_checks_enabled);

src-tauri/src/types.rs

@@ -1,4 +1,5 @@
 import { lazy, Suspense } from "react";
+import "katex/dist/katex.min.css";
 import "./styles/base.css";
 import "./styles/ds-tokens.css";
 import "./styles/ds-modal.css";

src/App.tsx

@@ -1580,6 +1580,7 @@ export default function MainApp() {
       composerCodeBlockCopyUseModifier:
         appSettings.composerCodeBlockCopyUseModifier,
       showMessageFilePath: appSettings.showMessageFilePath,
+      mathRenderingEnabled: appSettings.mathRenderingEnabled,
       openAppTargets: appSettings.openAppTargets,
       selectedOpenAppId: appSettings.selectedOpenAppId,
       experimentalAppsEnabled: appSettings.experimentalAppsEnabled,

src/features/app/components/MainApp.tsx

@@ -22,6 +22,7 @@ type UseMainAppLayoutSurfacesArgs = {
     | "usageShowRemaining"
     | "composerCodeBlockCopyUseModifier"
     | "showMessageFilePath"
+    | "mathRenderingEnabled"
     | "openAppTargets"
     | "selectedOpenAppId"
     | "experimentalAppsEnabled"
@@ -444,6 +445,7 @@ function buildPrimarySurface({
       openTargets: appSettings.openAppTargets,
       selectedOpenAppId: appSettings.selectedOpenAppId,
       codeBlockCopyUseModifier: appSettings.composerCodeBlockCopyUseModifier,
+      enableMathRendering: appSettings.mathRenderingEnabled,
       showMessageFilePath: appSettings.showMessageFilePath,
       userInputRequests,
       onUserInputSubmit,

src/features/app/hooks/useMainAppLayoutSurfaces.ts

@@ -557,4 +557,258 @@ describe("Markdown file-like href behavior", () => {
     expect(screen.getByText("Ready")).toBeTruthy();
   });
 
+  it("renders inline dollar math when enabled", () => {
+    const { container } = render(
+      <Markdown
+        value="Euler identity: $e^{i\\pi}+1=0$"
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex")).toBeTruthy();
+    expect(container.textContent).toContain("Euler identity");
+  });
+
+  it("renders block math when enabled", () => {
+    const { container } = render(
+      <Markdown
+        value={["$$", "\\nabla \\cdot \\mathbf{E} = \\frac{\\rho}{\\varepsilon_0}", "$$"].join(
+          "\n",
+        )}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex-display")).toBeTruthy();
+  });
+
+  it("supports \\(inline\\) and \\[block\\] LaTeX delimiters when enabled", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "Inline: \\(x^2 + y^2\\)",
+          "",
+          "\\[",
+          "\\int_0^1 x^2\\,dx = \\frac{1}{3}",
+          "\\]",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelectorAll(".katex").length).toBeGreaterThanOrEqual(2);
+    expect(container.querySelector(".katex-display")).toBeTruthy();
+  });
+
+  it("does not render math inside fenced code blocks", () => {
+    const { container } = render(
+      <Markdown
+        value={["```text", "$e^{i\\pi}+1=0$", "\\(x^2\\)", "```"].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex")).toBeNull();
+    expect(container.textContent).toContain("$e^{i\\pi}+1=0$");
+    expect(container.textContent).toContain("\\(x^2\\)");
+  });
+
+  it("does not render math inside container-prefixed fenced code blocks", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "> ```text",
+          "> \\(x^2\\)",
+          "> \\[x+y\\]",
+          "> ```",
+          "",
+          "Outside: \\(z^2\\)",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelectorAll(".katex").length).toBe(1);
+    expect(container.textContent).toContain("\\(x^2\\)");
+    expect(container.textContent).toContain("\\[x+y\\]");
+  });
+
+  it("does not render math inside indented code blocks", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "    \\(x^2\\)",
+          "    \\[",
+          "    x+y",
+          "    \\]",
+          "",
+          "Outside: \\(z^2\\)",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelectorAll(".katex").length).toBe(1);
+    expect(container.textContent).toContain("\\(x^2\\)");
+    expect(container.textContent).toContain("\\[");
+    expect(container.textContent).toContain("\\]");
+  });
+
+  it("does not rewrite escaped \\(inline\\) delimiters", () => {
+    const { container } = render(
+      <Markdown
+        value={["Literal: \\\\(x\\\\)", "Outside: \\(z^2\\)"].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelectorAll(".katex").length).toBe(1);
+    expect(container.textContent).toContain("\\(x\\)");
+  });
+
+  it("renders \\(inline\\) math when adjacent to percent and slash punctuation", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "Success: \\(p\\)%",
+          "Ratio: \\(a\\)/\\(b\\)",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelectorAll(".katex").length).toBe(3);
+    expect(container.textContent).toContain("Success:");
+    expect(container.textContent).toContain("Ratio:");
+  });
+
+  it("does not render math inside blockquote-indented code blocks", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          ">     \\(x^2\\)",
+          ">     \\[x+y\\]",
+          "",
+          "Outside: \\(z^2\\)",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelectorAll(".katex").length).toBe(1);
+    expect(container.textContent).toContain("\\(x^2\\)");
+    expect(container.textContent).toContain("\\[x+y\\]");
+  });
+
+  it("keeps math-like delimiters literal inside long fences with nested shorter fences", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "````text",
+          "inner fence marker:",
+          "```",
+          "\\(x^2\\)",
+          "\\[x+y\\]",
+          "````",
+          "Outside: \\(z^2\\)",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector(".katex")).toBeTruthy();
+    expect(container.textContent).toContain("\\(x^2\\)");
+    expect(container.textContent).toContain("\\[x+y\\]");
+  });
+
+  it("preserves nested list and blockquote structure for \\\\[...\\\\] block delimiters", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "- List item with block math:",
+          "  \\[",
+          "  x^2 + y^2 = r^2",
+          "  \\]",
+          "",
+          "> \\[",
+          "> E = mc^2",
+          "> \\]",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector("li .katex-display")).toBeTruthy();
+    expect(container.querySelector("blockquote .katex-display")).toBeTruthy();
+  });
+
+  it("does not rewrite escaped latex delimiters in link destinations", () => {
+    render(
+      <Markdown
+        value="[wiki](https://en.wikipedia.org/wiki/Function_\\(mathematics\\))"
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    const link = screen.getByText("wiki").closest("a");
+    expect(link?.getAttribute("href")).toBe(
+      "https://en.wikipedia.org/wiki/Function_%5C(mathematics%5C)",
+    );
+  });
+
+  it("does not rewrite escaped latex delimiters in plain URL literals and references", () => {
+    const { container } = render(
+      <Markdown
+        value={[
+          "https://example.com/\\(foo\\)",
+          "[ref]: https://example.com/\\(bar\\)",
+        ].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    const plainUrlLink = screen.getByText("https://example.com/\\(foo\\)").closest("a");
+    expect(plainUrlLink?.getAttribute("href")).toBe("https://example.com/%5C(foo%5C)");
+    const referenceUrlLink = screen.getByText("https://example.com/\\(bar\\)").closest("a");
+    expect(referenceUrlLink?.getAttribute("href")).toBe("https://example.com/%5C(bar%5C)");
+    expect(container.textContent).toContain("[ref]:");
+  });
+
+  it("matches blockquote block-math closer when quote spacing differs", () => {
+    const { container } = render(
+      <Markdown
+        value={["> \\[", "> E = mc^2", ">\\]"].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector("blockquote .katex-display")).toBeTruthy();
+  });
+
+  it("matches blockquote block-math closer when quote indentation differs", () => {
+    const { container } = render(
+      <Markdown
+        value={[" > \\[", "> E = mc^2", ">\\]"].join("\n")}
+        className="markdown"
+        enableMathRendering
+      />,
+    );
+
+    expect(container.querySelector("blockquote .katex-display")).toBeTruthy();
+  });
+
 });