Get markdown cells to work well with mathjax.

Author: jasongrout

jupyter_notebook/static/phosphor-notebook/gulpfile.js

@@ -19,6 +19,7 @@ var tsSources = [
     "NotebookComponent",
     "nbformat",
     "demodata",
+    "mathjaxutils",
 ].map(function(name) {return "./src/" + name + ".ts"; });
 
 

jupyter_notebook/static/phosphor-notebook/index.html

@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="components/codemirror/lib/codemirror.css">
     <script src="components/marked/marked.min.js"></script>
     <script src="/static/components/requirejs/require.js"></script>
-    <script src="/static/components/MathJax/MathJax.js?config=TeX-AMS_HTML-full"></script>
+    <script src="/static/components/MathJax/MathJax.js?config=TeX-AMS_HTML-full&delayStartupUntil=configured"></script>
     <link href="components/phosphor/dist/phosphor.css" rel="stylesheet" type="text/css">
     <!--<link href="build/index.css" rel="stylesheet" type="text/css">-->
     <script src="components/phosphor/dist/phosphor.js"></script>

jupyter_notebook/static/phosphor-notebook/src/NotebookComponent.ts

@@ -1,6 +1,7 @@
 ///<reference path="../components/phosphor/dist/phosphor.d.ts"/>
 
 import nbformat = require("./nbformat");
+import mathjaxutils = require("./mathjaxutils");
 import DOM = phosphor.virtualdom.dom;
 import Component = phosphor.virtualdom.Component;
 import BaseComponent = phosphor.virtualdom.BaseComponent;
@@ -58,17 +59,30 @@ class JupyterErrorComponent extends Component<nbformat.JupyterError> {
 }
 export var JupyterError = createFactory(JupyterErrorComponent)
 
-class MarkdownCellComponent extends BaseComponent<nbformat.MarkdownCell> {
-  constructor(data: nbformat.MarkdownCell, children: Elem[]) {
-    super(data, children);
-    this.onUpdateRequest(undefined);
-  }
+// customized renderer example from marked.js readme
+var renderer = new (<any>marked).Renderer();
+renderer.heading = function (text: string, level: number) {
+  var escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
+  return '<h' + level + '><a name="' +
+                escapedText +
+                 '" class="anchor" href="#' +
+                 escapedText +
+                 '"><span class="header-link"></span></a>' +
+                  text + '</h' + level + '>';
+}
+// TODO: make links open new tabs
+// links in markdown cells should open in new tabs
+// html.find("a[href]").not('[href^="#"]').attr("target", "_blank");
 
+
+class MarkdownCellComponent extends BaseComponent<nbformat.MarkdownCell> {
   onUpdateRequest(msg: IMessage): void {
     // replace the innerHTML of the node with the rendered markdown
-    var x = this.data.source;
-    this.node.innerHTML = marked(typeof x === "string" ? x : x.join(''));
-    MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.node]);
+    var t = mathjaxutils.remove_math(this.data.source);
+    marked(t.html, { sanitize: true }, (err: any, html: string) => {
+        this.node.innerHTML = mathjaxutils.replace_math(html, t.math);
+        MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.node]);
+    });
   }
 }
 export var MarkdownCell = createFactory(MarkdownCellComponent)

jupyter_notebook/static/phosphor-notebook/src/index.ts

@@ -2,9 +2,11 @@ import NotebookApp = require("./app");
 import NotebookComponent = require("./NotebookComponent");
 import render = phosphor.virtualdom.render;
 import demo = require("./demodata")
+import mathjaxutils = require("./mathjaxutils");
 export function main(): void {
     //    var notebook = new NotebookApp.NotebookApplication;
     // notebook.run();
     var test = document.getElementById('test');
+    mathjaxutils.init();
     render(NotebookComponent.Notebook(demo.notebook), test);
 };