Add proper syntax highlighting for notebook

coolreader18 · coolreader18 · commit 87e2d0cbcc02 · 2020-09-29T13:53:35.000-05:00
diff --git a/wasm/notebook/src/index.js b/wasm/notebook/src/index.js
@@ -3,6 +3,8 @@ import './style.css';
 // https://github.com/codemirror/codemirror
 import CodeMirror from 'codemirror';
 import 'codemirror/mode/python/python';
+import 'codemirror/mode/markdown/markdown';
+import 'codemirror/mode/stex/stex';
 import 'codemirror/addon/comment/comment';
 import 'codemirror/lib/codemirror.css';
 
@@ -55,7 +57,7 @@ const editor = CodeMirror.fromTextArea(document.getElementById('code'), {
         },
     },
     lineNumbers: true,
-    mode: 'text/x-python',
+    mode: 'text/x-notebook',
     indentUnit: 4,
     autofocus: true,
     lineWrapping: true,
@@ -86,6 +88,9 @@ function parseCodeFromEditor() {
         // so far have py for python, md for markdown and math for math ;p
         let content = chunk.chunkContent;
         switch (chunk.chunkType) {
+            // by default assume this is python code
+            // so users don't have to type py manually
+            case '':
             case 'py':
                 runPython(content);
                 break;
@@ -99,9 +104,7 @@ function parseCodeFromEditor() {
                 notebook.innerHTML += renderMath(content, false);
                 break;
             default:
-                // by default assume this is python code
-                // so users don't have to type py manually
-                runPython(code);
+            // do nothing when we see an unknown chunk for now
         }
     });
 }
diff --git a/wasm/notebook/src/parser.js b/wasm/notebook/src/parser.js
@@ -1,3 +1,5 @@
+import CodeMirror from 'codemirror';
+
 // The parser is from Mozilla's iodide project:
 // https://github.com/iodide-project/iodide/blob/master/src/editor/iomd-tools/iomd-parser.js
 
@@ -84,3 +86,52 @@ export function iomdParser(fullIomd) {
     pushChunk(iomdLines.length);
     return chunks;
 }
+
+CodeMirror.defineMode('notebook', function (config, _parserConfig) {
+    const nullMode = CodeMirror.getMode(config, 'text/plain');
+    const python = CodeMirror.getMode(config, 'python');
+    const markdown = CodeMirror.getMode(config, 'markdown');
+    const latex = CodeMirror.getMode(config, 'text/x-latex');
+    const modeMap = {
+        py: python,
+        md: markdown,
+        math: latex,
+        'math-inline': latex,
+    };
+    return {
+        startState() {
+            return {
+                mode: python,
+                modeState: python.startState(),
+                chunkStart: false,
+            };
+        },
+        token(stream, state) {
+            if (stream.sol() && stream.match('%%')) {
+                stream.eatSpace();
+                state.chunkStart = true;
+                return 'keyword';
+            }
+            if (state.chunkStart) {
+                const m = stream.match(/[\w\-]+/);
+                const name = m && m[0];
+                const mode = (state.mode = modeMap[name] || nullMode);
+                state.modeState = mode.startState ? mode.startState() : null;
+                state.chunkStart = false;
+                return 'keyword';
+            }
+            const { mode, modeState } = state;
+            return mode.token(stream, modeState);
+        },
+        indent(state, textAfter, line) {
+            const { mode, modeState } = state;
+            if (mode.indent) return mode.indent(modeState, textAfter, line);
+        },
+        innerMode(state) {
+            const { mode, modeState } = state;
+            return { mode, state: modeState };
+        },
+    };
+});
+
+CodeMirror.defineMIME('text/x-notebook', 'notebook');
diff --git a/wasm/notebook/src/sample.txt b/wasm/notebook/src/sample.txt
@@ -6,7 +6,7 @@ print("Javascript called. It wants its DOM elements back.")
 
 ## RustPython Notebook with Markdown and Math
 
-Look! I can write markdown in the notebook. It messes up code highligting, but at least it works.
+Look! I can write markdown in the notebook. It's even syntax-highlighted correctly!
 
 1. i can make a list
 1. i can haz many lines and numbers
diff --git a/wasm/notebook/webpack.config.js b/wasm/notebook/webpack.config.js
@@ -71,7 +71,8 @@ module.exports = (env = {}) => {
     if (!env.noWasmPack) {
         config.plugins.push(
             new WasmPackPlugin({
-                crateDirectory: path.join(__dirname, '../lib')
+                crateDirectory: path.join(__dirname, '../lib'),
+                forceMode: 'release'
             })
         );
     }
