render LaTeX

browser/components/MarkdownPreview.js

@@ -6,6 +6,8 @@ var ReactDOM = require('react-dom')
 const electron = require('electron')
 const shell = electron.shell
 
+const katex = window.katex
+
 function handleAnchorClick (e) {
   e.preventDefault()
   e.stopPropagation()
@@ -17,13 +19,27 @@ function stopPropagation (e) {
   e.stopPropagation()
 }
 
+function math2Katex (display) {
+  return function (el) {
+    try {
+      katex.render(el.innerHTML, el, {display: display})
+      el.className = 'math-rendered'
+    } catch (e) {
+      el.innerHTML = e.message
+      el.className = 'math-failed'
+    }
+  }
+}
+
 export default class MarkdownPreview extends React.Component {
   componentDidMount () {
     this.addListener()
+    this.renderMath()
   }
 
   componentDidUpdate () {
     this.addListener()
+    this.renderMath()
   }
 
   componentWillUnmount () {
@@ -34,6 +50,13 @@ export default class MarkdownPreview extends React.Component {
     this.removeListener()
   }
 
+  renderMath () {
+    let inline = ReactDOM.findDOMNode(this).querySelectorAll('span.math')
+    Array.prototype.forEach.call(inline, math2Katex(false))
+    let block = ReactDOM.findDOMNode(this).querySelectorAll('div.math')
+    Array.prototype.forEach.call(block, math2Katex(true))
+  }
+
   addListener () {
     var anchors = ReactDOM.findDOMNode(this).querySelectorAll('a:not(.lineAnchor)')
 

browser/lib/markdown.js

@@ -1,6 +1,7 @@
 import markdownit from 'markdown-it'
 import hljs from 'highlight.js'
 import emoji from 'markdown-it-emoji'
+import math from 'markdown-it-math'
 
 var md = markdownit({
   typographer: true,
@@ -20,6 +21,14 @@ var md = markdownit({
   }
 })
 md.use(emoji)
+md.use(math, {
+  inlineRenderer: function (str) {
+    return `<span class='math'>${str}</span>`
+  },
+  blockRenderer: function (str) {
+    return `<div class='math'>${str}</div>`
+  }
+})
 
 let originalRenderToken = md.renderer.renderToken
 md.renderer.renderToken = function renderToken (tokens, idx, options) {

browser/styles/mixins/marked.styl

@@ -1,5 +1,13 @@
 marked()
   font-size 14px
+  div.math-rendered
+    text-align center
+  .math-failed
+    background-color alpha(red, 0.1)
+    color darken(red, 15%)
+    padding 5px
+    margin -5px
+    border-radius 5px
   a
     color brandColor
     text-decoration none