voila-dashboards · martinRenou · Sep 23, 2024 · Sep 27, 2024 · Sep 27, 2024 · Sep 27, 2024
diff --git a/.gitignore b/.gitignore
@@ -49,3 +49,5 @@ ui-tests/playwright-report
 ui-tests/test-results
 ui-tests/benchmark-results
 ui-tests/jlab_root
+
+.yarn
diff --git a/package.json b/package.json
@@ -52,6 +52,6 @@
     "prettier": "^1.19.0",
     "rimraf": "^3.0.2",
     "shell-quote": "^1.7.2",
-    "typescript": "~4.1.3"
+    "typescript": "~5"
   }
 }
diff --git a/packages/voila/package.json b/packages/voila/package.json
@@ -15,9 +15,12 @@
     "@jupyter-widgets/jupyterlab-manager": "^5.0.8",
     "@jupyterlab/application": "^3 || ^4",
     "@jupyterlab/apputils": "^3 || ^4",
+    "@jupyterlab/codemirror": "^3 || ^4",
     "@jupyterlab/coreutils": "^5 || ^6",
     "@jupyterlab/docregistry": "^3 || ^4 || ^5",
     "@jupyterlab/javascript-extension": "^3 || ^4",
+    "@jupyterlab/markedparser-extension": "^4",
+    "@jupyterlab/mathjax2-extension": "^4",
     "@jupyterlab/notebook": "^3 || ^4",
     "@jupyterlab/outputarea": "^3 || ^4",
     "@jupyterlab/rendermime": "^3 || ^4",
@@ -29,8 +32,7 @@
     "@lumino/signaling": "^1.4.3 || ^2",
     "@lumino/virtualdom": "^1.8.0 || ^2",
     "@lumino/widgets": "^1.18.0 || ^2",
-    "jquery": "^3.7.0",
-    "mathjax-full": "^3.0.0"
+    "jquery": "^3.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

diff --git a/packages/voila/src/index.ts b/packages/voila/src/index.ts
@@ -14,7 +14,16 @@ export {
   standardRendererFactories
 } from '@jupyterlab/rendermime';
 
+export {
+  EditorLanguageRegistry
+} from '@jupyterlab/codemirror';
+
+export { MathJaxTypesetter } from '@jupyterlab/mathjax2-extension';
+
+export { createMarkdownParser } from '@jupyterlab/markedparser-extension';
+
 export { extendedRendererFactories } from './rendermime';
 export { WidgetManager } from './manager';
 export { connectKernel } from './kernel';
-export { renderMathJax } from './mathjax';
+// This is a no-op, keeping this around for backward compat
+export function renderMathJax() {};
diff --git a/packages/voila/src/manager.ts b/packages/voila/src/manager.ts
@@ -31,6 +31,7 @@ import * as LuminoVirtualdom from '@lumino/virtualdom';
 import * as LuminoAlgorithm from '@lumino/algorithm';
 import * as LuminoCommands from '@lumino/commands';
 import * as LuminoDomutils from '@lumino/domutils';
+import * as Mathjax2 from '@jupyterlab/mathjax2-extension';
 
 import { MessageLoop } from '@lumino/messaging';
 
@@ -52,6 +53,8 @@ if (typeof window !== 'undefined' && typeof window.define !== 'undefined') {
   window.define('@jupyterlab/coreutils', CoreUtils);
   window.define('@jupyterlab/docregistry', DocRegistry);
   window.define('@jupyterlab/outputarea', OutputArea);
+  window.define('@jupyterlab/outputarea', OutputArea);
+  window.define('@jupyterlab/mathjax2-extension', Mathjax2);
 
   window.define('@phosphor/widgets', LuminoWidget);
   window.define('@phosphor/signaling', LuminoSignaling);
@@ -68,6 +71,22 @@ if (typeof window !== 'undefined' && typeof window.define !== 'undefined') {
   window.define('@lumino/domutils', LuminoDomutils);
 }
 
+const [urlParam, configParam] = ['fullMathjaxUrl', 'mathjaxConfig'];
+const url = CoreUtils.PageConfig.getOption(urlParam);
+const config = CoreUtils.PageConfig.getOption(configParam);
+if (url !== 'null' || config !== 'null') {
+  CoreUtils.PageConfig.setOption(
+    urlParam,
+    url === 'null'
+      ? 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js'
+      : url
+  );
+  CoreUtils.PageConfig.setOption(
+    configParam,
+    config === 'null' ? 'TeX-AMS_CHTML-full,Safe' : config
+  );
+}
+
 const WIDGET_MIMETYPE = 'application/vnd.jupyter.widget-view+json';
 
 /**

diff --git a/packages/voila/src/mathjax.ts b/packages/voila/src/mathjax.ts
diff --git a/packages/voila/style/index.css b/packages/voila/style/index.css
@@ -1,131 +0,0 @@
-@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');
-}

diff --git a/share/jupyter/voila/templates/base/static/main.js b/share/jupyter/voila/templates/base/static/main.js
@@ -42,10 +42,16 @@ require([window.voila_js_url || 'static/voila'], function(voila) {
             saveState: false
         };
 
+        const languages = new voila.EditorLanguageRegistry();
+
         const rendermime = new voila.RenderMimeRegistry({
-            initialFactories: voila.extendedRendererFactories
+            initialFactories: voila.extendedRendererFactories,
+            latexTypesetter: new voila.MathJaxTypesetter(),
+            markdownParser: voila.createMarkdownParser(languages)
         });
 
+        await rendermime.latexTypesetter.typeset(document.createElement('div'));
+
         var widgetManager = new voila.WidgetManager(context, rendermime, settings);
 
         async function init() {
@@ -61,7 +67,6 @@ require([window.voila_js_url || 'static/voila'], function(voila) {
                 kernel.dispose();
             });
             await widgetManager.build_widgets();
-            voila.renderMathJax();
         }
 
         if (document.readyState === 'complete') {

diff --git a/share/jupyter/voila/templates/classic/index.html.j2 b/share/jupyter/voila/templates/classic/index.html.j2
@@ -30,6 +30,10 @@
 
 {%- endblock html_head_js -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {%- block html_head_css -%}
   {{ resources.include_css("static/materialcolors.css") }}
   {{ resources.include_css("static/labvariables.css") }}

diff --git a/share/jupyter/voila/templates/lab/index.html.j2 b/share/jupyter/voila/templates/lab/index.html.j2
@@ -48,6 +48,10 @@
 {% endif %}
 {%- endblock html_head_css -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {# this overrides the default behaviour of rendering static widgets #}
 {% block jupyter_widgets %}
 {% endblock jupyter_widgets %}

diff --git a/share/jupyter/voila/templates/reveal/index.html.j2 b/share/jupyter/voila/templates/reveal/index.html.j2
@@ -31,6 +31,10 @@
 
 {%- endblock html_head_js -%}
 
+{%- block html_head_js_mathjax -%}
+{# remove mathjax CDN #}
+{%- endblock html_head_js_mathjax -%}
+
 {%- block html_head_css -%}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@^5/css/all.min.css" type="text/css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@^5/css/v4-shims.min.css" type="text/css" />