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

lib/finder.html

@@ -15,9 +15,9 @@
   <style>
   @font-face {
     font-family: 'Lato';
-    src: url('../resources/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
-         url('../resources/Lato-Regular.woff') format('woff'), /* Modern Browsers */
-         url('../resources/Lato-Regular.ttf') format('truetype');
+    src: url('../resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+         url('../resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+         url('../resources/fonts/Lato-Regular.ttf') format('truetype');
     font-style: normal;
     font-weight: normal;
     text-rendering: optimizeLegibility;

lib/main.html

@@ -9,13 +9,15 @@
   <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css">
   <link rel="shortcut icon" href="../resources/favicon.ico">
   <title>Boostnote</title>
+  <link rel="stylesheet" href="../resources/katex.min.css">
+</script>
 
   <style>
   @font-face {
     font-family: 'Lato';
-    src: url('../resources/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
-         url('../resources/Lato-Regular.woff') format('woff'), /* Modern Browsers */
-         url('../resources/Lato-Regular.ttf') format('truetype');
+    src: url('../resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+         url('../resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+         url('../resources/fonts/Lato-Regular.ttf') format('truetype');
     font-style: normal;
     font-weight: normal;
     text-rendering: optimizeLegibility;
@@ -54,6 +56,7 @@
   <div id="content"></div>
 
   <script src="../submodules/ace/src-min/ace.js"></script>
+  <script src="../resources/katex.min.js"></script>
   <script type='text/javascript'>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)

package.json

@@ -39,6 +39,7 @@
     "lodash": "^3.10.1",
     "markdown-it": "^4.4.0",
     "markdown-it-emoji": "^1.1.0",
+    "markdown-it-math": "^3.0.2",
     "md5": "^2.0.0",
     "moment": "^2.10.3",
     "superagent": "^1.2.0",

webpack-skeleton.js

@@ -30,7 +30,8 @@ var config = {
     'moment',
     'highlight.js',
     'markdown-it-emoji',
-    'fs-jetpack'
+    'fs-jetpack',
+    'markdown-it-math'
   ]
 }