Fix mathjax use in webapp

Behavior in jupyterlab rendermime changed previously. This uses the newest way of specifying the latex typesetter. No change needed for the lab extension, as that should be configured from the application level.
jupyter · Sep 3, 2018 · d6bd80a · d6bd80a
1 parent 14137b6
commit d6bd80a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/nbdime/webapp/templates/nbdimepage.html b/nbdime/webapp/templates/nbdimepage.html
@@ -7,9 +7,7 @@
     <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
     <script type="text/javascript" src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.js"></script>
-    {% if mathjax_url %}
-    <script type="text/javascript" src="{{mathjax_url}}?config={{mathjax_config}}&delayStartupUntil=configured" charset="utf-8"></script>
-    {% endif %}
+
     <title>nbdime - diff and merge your Jupyter notebooks</title>
 
   </head>
@@ -25,6 +23,12 @@
     <div id="nbdime-root">
     </div>
 
+    <script id='jupyter-config-data' type="application/json">{
+      {% if mathjax_url %}
+      "mathjaxUrl": "{{mathjax_url}}",
+      "mathjaxConfig": {{ mathjax_config|tojson|safe }}
+      {% endif %}
+    }</script>
     <script id='nbdime-config-data' type="application/json">{{ config_data|tojson|safe }}</script>
     <script src="{{ static_url('nbdime.js') }}"></script>
     <noscript>Nbdime relies on javascript for diff/merge views!</noscript>

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^0.18.4",
+    "@jupyterlab/mathjax2-extension": "^0.6.4",
     "@jupyterlab/apputils": "^0.18.4",
     "@jupyterlab/cells": "^0.18.4",
     "@jupyterlab/codemirror": "^0.18.4",

diff --git a/packages/webapp/src/app/diff.ts b/packages/webapp/src/app/diff.ts
@@ -19,6 +19,10 @@ import {
   defaultSanitizer
 } from '@jupyterlab/apputils';
 
+import {
+  MathJaxTypesetter
+} from '@jupyterlab/mathjax2-extension';
+
 import {
   IDiffEntry
 } from 'nbdime/lib/diff/diffentries';
@@ -80,6 +84,7 @@ function showDiff(data: {base: nbformat.INotebookContent, diff: IDiffEntry[]}):
   let rendermime = new RenderMimeRegistry({
     initialFactories: rendererFactories,
     sanitizer: defaultSanitizer,
+    latexTypesetter: new MathJaxTypesetter(),
   });
 
   let nbdModel = new NotebookDiffModel(data.base, data.diff);