feat: move from MathJax to Katex (#483)

* feat: move from MathJax to Katex

packages/solara-widget-manager/package.json

@@ -28,7 +28,7 @@
     "@lumino/signaling": "^1.4.3",
     "@lumino/virtualdom": "^1.8.0",
     "@lumino/widgets": "^1.18.0",
-    "mathjax-full": "^3.0.0"
+    "katex": "^0.16.09"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",

packages/solara-widget-manager/src/index.ts

@@ -15,5 +15,5 @@ export {
 } from '@jupyterlab/rendermime';
 export { connectKernel, shutdownKernel } from './kernel';
 export { WidgetManager } from './manager';
-export { renderMathJax } from './mathjax';
+export { KatexTypesetter, renderKatex } from './katex';
 export { extendedRendererFactories } from './rendermime';

packages/solara-widget-manager/src/katex.ts

@@ -0,0 +1,43 @@
+import renderMathInElement from 'katex/dist/contrib/auto-render';
+
+import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
+
+import { DescriptionView } from '@jupyter-widgets/controls';
+
+let latexDelimiters = [
+    { left: '$$', right: '$$', display: true },
+    { left: '$', right: '$', display: false },
+    { left: '\\(', right: '\\)', display: false },
+    { left: '\\[', right: '\\]', display: true }
+];
+
+// Override DescriptionView with one that doesn't use MathJax, and instead just uses KatexTypesetter
+DescriptionView.prototype.typeset = function(element: HTMLElement, text?: string): void {
+    this.displayed.then(() => {
+        const widget_manager: any = this.model.widget_manager;
+        const latexTypesetter = widget_manager._rendermime?.latexTypesetter;
+        if (latexTypesetter) {
+          if (text !== void 0) {
+            element.textContent = text;
+          }
+          latexTypesetter.typeset(element);
+        }
+    });
+}
+
+export class KatexTypesetter implements IRenderMime.ILatexTypesetter {
+    /**
+     * Typeset the math in a node.
+     */
+    typeset(node: HTMLElement): void {
+        renderMathInElement(node, {
+            delimiters: latexDelimiters
+        });
+    }
+  }
+
+export function renderKatex(): void {
+    renderMathInElement(document, {
+        delimiters: latexDelimiters,
+    });
+}

packages/solara-widget-manager/style/index.css

@@ -1,131 +1 @@
-@font-face /* 0 */ {
-  font-family: MJXZERO;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Zero.woff')
-    format('woff');
-}
-
-@font-face /* 1 */ {
-  font-family: MJXTEX;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Main-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 2 */ {
-  font-family: MJXTEX-B;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Main-Bold.woff')
-    format('woff');
-}
-
-@font-face /* 3 */ {
-  font-family: MJXTEX-MI;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Main-Italic.woff')
-    format('woff');
-}
-
-@font-face /* 4 */ {
-  font-family: MJXTEX-I;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Math-Italic.woff')
-    format('woff');
-}
-
-@font-face /* 5 */ {
-  font-family: MJXTEX-BI;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Math-BoldItalic.woff')
-    format('woff');
-}
-
-@font-face /* 6 */ {
-  font-family: MJXTEX-S1;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Size1-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 7 */ {
-  font-family: MJXTEX-S2;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Size2-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 8 */ {
-  font-family: MJXTEX-S3;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Size3-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 9 */ {
-  font-family: MJXTEX-S4;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Size4-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 10 */ {
-  font-family: MJXTEX-A;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_AMS-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 11 */ {
-  font-family: MJXTEX-C;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 12 */ {
-  font-family: MJXTEX-C-B;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff')
-    format('woff');
-}
-
-@font-face /* 13 */ {
-  font-family: MJXTEX-FR;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 14 */ {
-  font-family: MJXTEX-FR-B;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Fraktur-Bold.woff')
-    format('woff');
-}
-
-@font-face /* 15 */ {
-  font-family: MJXTEX-SS;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 16 */ {
-  font-family: MJXTEX-SS-B;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Bold.woff')
-    format('woff');
-}
-
-@font-face /* 17 */ {
-  font-family: MJXTEX-SS-I;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_SansSerif-Italic.woff')
-    format('woff');
-}
-
-@font-face /* 18 */ {
-  font-family: MJXTEX-SC;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Script-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 19 */ {
-  font-family: MJXTEX-T;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Typewriter-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 20 */ {
-  font-family: MJXTEX-V;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Regular.woff')
-    format('woff');
-}
-
-@font-face /* 21 */ {
-  font-family: MJXTEX-VB;
-  src: url('~mathjax-full/es5/output/chtml/fonts/woff-v2/MathJax_Vector-Bold.woff')
-    format('woff');
-}
+@import "../node_modules/katex/dist/katex.min.css";

packages/solara-widget-manager8/package.json

@@ -25,7 +25,7 @@
     "@lumino/signaling": "^1.4.3",
     "@lumino/virtualdom": "^1.8.0",
     "@lumino/widgets": "^1.18.0",
-    "mathjax-full": "^3.0.0",
+    "katex": "^0.16.09",
     "patch-package": "^8.0.0"
   },
   "devDependencies": {

solara/components/markdown.py

@@ -285,7 +285,7 @@ def Markdown(md_text: str, unsafe_solara_execute=False, style: Union[str, Dict,
 
     Renders markdown using https://python-markdown.github.io/
 
-    Math rendering is done using Latex syntax, using https://www.mathjax.org/.
+    Math rendering is done using Latex syntax, using https://katex.org/.
 
     ## Examples
 

solara/server/static/main-vuetify.js

@@ -211,8 +211,11 @@ async function solaraInit(mountId, appName) {
         saveState: false
     };
 
+    // override the latexTypesetter to use katex, in case there are any libraries that
+    // make use of that.
     const rendermime = new solara.RenderMimeRegistry({
-        initialFactories: solara.extendedRendererFactories
+        initialFactories: solara.extendedRendererFactories,
+        latexTypesetter: new solara.KatexTypesetter(),
     });
 
     let widgetManager = new solara.WidgetManager(context, rendermime, settings);
@@ -231,7 +234,7 @@ async function solaraInit(mountId, appName) {
     }
     await solaraMount(widgetManager, mountId || 'content', widgetModelId);
     skipReconnectedCheck = false;
-    solara.renderMathJax();
+    solara.renderKatex();
 }
 
 async function solaraMount(widgetManager, mountId, modelId) {

tests/integration/latex_test.py

@@ -18,13 +18,13 @@ def test_widget_latex_solara(solara_test, page_session: playwright.sync_api.Page
     container = widgets.VBox([label], layout={"width": "200px", "height": "100px"})
     display(container)
 
-    page_session.locator(".test-class-latex >> .mjx-c1D438").wait_for()
+    page_session.locator(".test-class-latex >> .mrel").wait_for()
     page_session.evaluate("document.fonts.ready")
     page_session.wait_for_timeout(1000)
     assert_solara_snapshot(page_session.locator(".test-class-latex").screenshot(), postfix=widgets_postfix)
     label.value = r"$\alpha$"
     label.add_class("test-changed-class-latex")
-    page_session.locator(".test-changed-class-latex >> .mjx-c1D6FC").wait_for()
+    page_session.locator(".test-changed-class-latex >> .mathnormal").wait_for()
     page_session.evaluate("document.fonts.ready")
     page_session.wait_for_timeout(1000)
     assert_solara_snapshot(page_session.locator(".test-changed-class-latex").screenshot(), postfix=widgets_postfix + "-changed")