Updated Math parsing

dist/notebooklab.js

@@ -699,6 +699,48 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //
 //
+var renderer = new _marked2.default.Renderer();
+
+/*
+  Regex to match KaTex blocks.
+
+  Supports the following:
+
+  \begin{equation}<math>\end{equation}
+  $$<math>$$
+  inline $<math>$
+
+  The matched text then goes through the KaTex renderer & then outputs the HTML
+*/
+var katexRegexString = '(\n  ^\\\\begin{[a-zA-Z]+}\\s\n  |\n  ^\\$\\$\n  |\n  \\s\\$(?!\\$)\n)\n  (.+?)\n(\n  \\s\\\\end{[a-zA-Z]+}$\n  |\n  \\$\\$$\n  |\n  \\$\n)\n'.replace(/\s/g, '').trim();
+
+renderer.paragraph = function (t) {
+  var text = t;
+  var inline = false;
+
+  if (typeof katex !== 'undefined') {
+    var katexString = text.replace(/\\/g, '\\');
+    var matches = new RegExp(katexRegexString, 'gi').exec(katexString);
+
+    if (matches && matches.length > 0) {
+      if (matches[1].trim() === '$' && matches[3].trim() === '$') {
+        inline = true;
+
+        text = katexString.replace(matches[0], '') + ' ' + katex.renderToString(matches[2]);
+      } else {
+        text = katex.renderToString(matches[2]);
+      }
+    }
+  }
+
+  return '<p class="' + (inline ? 'inline-katex' : '') + '">' + text + '</p>';
+};
+
+_marked2.default.setOptions({
+  sanitize: true,
+  renderer: renderer
+});
+
 exports.default = {
   components: {
     prompt: _prompt2.default
@@ -711,20 +753,7 @@ exports.default = {
   },
   computed: {
     markdown: function markdown() {
-      var regex = new RegExp('^\\$\\$(.*)\\$\\$$', 'g');
-
-      var source = this.cell.source.map(function (line) {
-        var matches = regex.exec(line.trim());
-
-        // Only render use the Katex library if it is actually loaded
-        if (matches && matches.length > 0 && typeof katex !== 'undefined') {
-          return katex.renderToString(matches[1]);
-        }
-
-        return line;
-      });
-
-      return (0, _marked2.default)(source.join(''));
+      return (0, _marked2.default)(this.cell.source.join(''));
     }
   }
 };
@@ -3047,7 +3076,7 @@ exports = module.exports = __webpack_require__(1)(undefined);
 // module
-exports.push([module.i, ".markdown .katex{display:block;text-align:center}", ""]);
+exports.push([module.i, ".markdown .katex{display:block;text-align:center}.markdown .inline-katex .katex{display:inline;text-align:initial}", ""]);
 // exports

index.html

@@ -22,7 +22,50 @@
     new Vue({
       el: '#app',
       data: {
-        json: false,
+        json: {
+         "cells": [
+          {
+           "cell_type": "markdown",
+           "metadata": {},
+           "source": [
+            "# Hello world #\n",
+            "\n",
+            "Escaping LaTeX with `$$<math>$$` works:\n",
+            "\n",
+            "$$ \\sin^2(x) + \\cos^2(x) = 1 $$\n",
+            "\n",
+            "Escaping LaTeX with `\\begin{equation}<math>\\end{equation}` does not work:\n",
+            "\n",
+            "\\begin{equation}\n",
+            "\\sin^2(x) + \\cos^2(x) = 1\n",
+            "\\end{equation}\n",
+            "\n",
+            "Inline LaTeX does not work: $\\sin^2(x) + \\cos^2(x) = 1$"
+           ]
+          }
+         ],
+         "metadata": {
+          "kernelspec": {
+           "display_name": "Python 3",
+           "language": "python",
+           "name": "python3"
+          },
+          "language_info": {
+           "codemirror_mode": {
+            "name": "ipython",
+            "version": 3
+           },
+           "file_extension": ".py",
+           "mimetype": "text/x-python",
+           "name": "python",
+           "nbconvert_exporter": "python",
+           "pygments_lexer": "ipython3",
+           "version": "3.5.2"
+          }
+         },
+         "nbformat": 4,
+         "nbformat_minor": 2
+       },
       },
       methods: {
         openFile(e) {

src/cells/markdown.vue

@@ -9,6 +9,63 @@
   import marked from 'marked';
   import Prompt from './prompt.vue';
+  const renderer = new marked.Renderer();
+
+  /*
+    Regex to match KaTex blocks.
+
+    Supports the following:
+
+    \begin{equation}<math>\end{equation}
+    $$<math>$$
+    inline $<math>$
+
+    The matched text then goes through the KaTex renderer & then outputs the HTML
+  */
+  const katexRegexString = `(
+    ^\\\\begin{[a-zA-Z]+}\\s
+    |
+    ^\\$\\$
+    |
+    \\s\\$(?!\\$)
+  )
+    (.+?)
+  (
+    \\s\\\\end{[a-zA-Z]+}$
+    |
+    \\$\\$$
+    |
+    \\$
+  )
+  `.replace(/\s/g, '').trim();
+
+  renderer.paragraph = (t) => {
+    let text = t;
+    let inline = false;
+
+    if (typeof katex !== 'undefined') {
+      const katexString = text.replace(/\\/g, '\\');
+      const matches = new RegExp(katexRegexString, 'gi').exec(katexString);
+
+      if (matches && matches.length > 0) {
+        if (matches[1].trim() === '$' && matches[3].trim() === '$') {
+          inline = true;
+
+          text = `${katexString.replace(matches[0], '')} ${katex.renderToString(matches[2])}`;
+        } else {
+          text = katex.renderToString(matches[2]);
+        }
+      }
+    }
+
+    return `<p class="${inline ? 'inline-katex' : ''}">${text}</p>`;
+  };
+
+  marked.setOptions({
+    sanitize: true,
+    renderer,
+  });
+
   export default {
     components: {
       prompt: Prompt,
@@ -21,20 +78,7 @@
     },
     computed: {
       markdown() {
-        const regex = new RegExp('^\\$\\$(.*)\\$\\$$', 'g');
-
-        const source = this.cell.source.map((line) => {
-          const matches = regex.exec(line.trim());
-
-          // Only render use the Katex library if it is actually loaded
-          if (matches && matches.length > 0 && typeof katex !== 'undefined') {
-            return katex.renderToString(matches[1]);
-          }
-
-          return line;
-        });
-
-        return marked(source.join(''));
+        return marked(this.cell.source.join(''));
       },
     },
   };
@@ -45,4 +89,9 @@
   display: block;
   text-align: center;
 }
+
+.markdown .inline-katex .katex {
+  display: inline;
+  text-align: initial;
+}
 </style>