Optional Mathjax rendering using mathjax-node-page package (#53)

* Node upgrade dependencies

* Barely working mathjax rendering using node.js

* Cache mathjax css and make it a command line option

* Allow use of local mathjax fonts

* Move mathjax-node-page config out of function scope

* No line break (word wrap) and justify

Author: ashwinvis

.gitignore

@@ -1 +1,2 @@
 node_modules
+package-lock.json

README.md

@@ -29,3 +29,6 @@ Environment variables
 * `INSTANT_MARKDOWN_BLOCK_EXTERNAL=1` - by default, external resources such as
   images, stylesheets, frames and plugins are *allowed*. Use this setting to
   *block* such external content.
+
+* `INSTANT_MARKDOWN_MATHJAX_FONTS="/usr/share/mathjax/fonts/HTML-CSS/"` - to
+  serve fonts for Mathjax from a local directory.

css/mjpage-html.css

@@ -0,0 +1,73 @@
+
+.mjpage .MJX-monospace {
+font-family: monospace
+}
+
+.mjpage .MJX-sans-serif {
+font-family: sans-serif
+}
+
+.mjpage {
+display: inline;
+font-style: normal;
+font-weight: normal;
+line-height: normal;
+font-size: 100%;
+font-size-adjust: none;
+text-indent: 0;
+text-align: left;
+text-transform: none;
+letter-spacing: normal;
+word-spacing: normal;
+word-wrap: normal;
+white-space: nowrap;
+float: none;
+direction: ltr;
+max-width: none;
+max-height: none;
+min-width: 0;
+min-height: 0;
+border: 0;
+padding: 0;
+margin: 0
+}
+
+.mjpage * {
+transition: none;
+-webkit-transition: none;
+-moz-transition: none;
+-ms-transition: none;
+-o-transition: none
+}
+
+.mjx-svg-href {
+fill: blue;
+stroke: blue
+}
+
+.MathJax_SVG_LineBox {
+display: table!important
+}
+
+.MathJax_SVG_LineBox span {
+display: table-cell!important;
+width: 10000em!important;
+min-width: 0;
+max-width: none;
+padding: 0;
+border: 0;
+margin: 0
+}
+
+.mjpage__block {
+text-align: center;
+margin: 1em 0em;
+position: relative;
+display: block!important;
+text-indent: 0;
+max-width: none;
+max-height: none;
+min-width: 0;
+min-height: 0;
+width: 100%
+}

css/mjpage-svg.css

@@ -145,6 +145,7 @@ td,th {
   font-size: 16px;
   line-height: 1.6;
   word-wrap: break-word;
+  text-align: justify;
 }
 
 .markdown-body a {

github-markdown.css

@@ -6,6 +6,7 @@
   <meta http-equiv="Content-Language" content="en">
   <link rel="stylesheet" type="text/css" href="/github-syntax-highlight.css">
   <link rel="stylesheet" type="text/css" href="/github-markdown.css">
+  <link rel="stylesheet" type="text/css" href="/css/mjpage-html.css">
   <style>
     .markdown-body {
       min-width: 200px;

index.html

@@ -8,6 +8,10 @@ var server = require('http').createServer(httpHandler),
     os = require('os'),
     send = require('send');
 
+var mjpage = require('mathjax-node-page').mjpage;
+// var fs = require('fs');  // for debugging
+var enableMathJax = process.argv[2] === "--mathjax";
+
 // WARNING: By setting this environment variable, anyone on your network may
 // run arbitrary code in your browser and read arbitrary files in the working
 // directory of the open file!
@@ -35,10 +39,47 @@ var md = new MarkdownIt({
   }
 });
 
+if (enableMathJax) md.use(require('markdown-it-mathjax')());
+
+const mjPageConfig = {
+  format: ["TeX"],
+  cssInline: false,
+};
+
+if (process.env.INSTANT_MARKDOWN_MATHJAX_FONTS) {
+  mjPageConfig.fontURL = process.env.INSTANT_MARKDOWN_MATHJAX_FONTS;
+}
+
+const mjNodeConfig = {
+  html: true,
+  // mml: true,
+  // svg: true,
+  equationNumbers: "AMS",
+  speakText: false
+};
+
+function mathJaxRenderEmit(newHtml) {
+  if(enableMathJax) {
+    mjpage(
+      newHtml,
+      mjPageConfig,
+      mjNodeConfig,
+      function(data) {
+          // console.log(data); // resulting HTML string
+          // fs.writeFileSync('output.html', data, 'utf-8'); // debug
+          io.sockets.emit('newContent', data);
+      }
+    );
+  }
+  else {
+    io.sockets.emit('newContent', newHtml)
+  }
+}
+
 var lastWrittenMarkdown = '';
 function writeMarkdown(body) {
   lastWrittenMarkdown = md.render(body);
-  io.sockets.emit('newContent', lastWrittenMarkdown);
+  mathJaxRenderEmit(lastWrittenMarkdown);
 }
 
 function readAllInput(input, callback) {
@@ -135,7 +176,8 @@ function httpHandler(req, res) {
 io.sockets.on('connection', function(sock){
   process.stdout.write('connection established!');
   if (lastWrittenMarkdown) {
-    sock.emit('newContent', lastWrittenMarkdown);
+    sock.emit('newContent', lastWrittenMarkdown);  // Quick preview
+    if (enableMathJax) mathJaxRenderEmit(lastWrittenMarkdown);
   }
 });
 

instant-markdown-d

@@ -10,9 +10,12 @@
     "instant-markdown-d": "./instant-markdown-d"
   },
   "dependencies": {
-    "highlight.js": "^8.4.0",
-    "markdown-it": "^3.0.3",
-    "send": "~0.1.0",
-    "socket.io": "^1.4.5"
+    "highlight.js": "^9.13.0",
+    "markdown-it": "^8.4.2",
+    "markdown-it-mathjax": "^2.0.0",
+    "mathjax-node-page": "^3.0.1",
+    "mathjax": "^2.7.5",
+    "send": "~0.16.2",
+    "socket.io": "^2.1.1"
   }
 }