diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 1b503bac..bee629f6 100644
--- a/browser/components/MarkdownPreview.js
+++ b/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)')
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index 619b9655..e3192fa5 100644
--- a/browser/lib/markdown.js
+++ b/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 `${str}`
+ },
+ blockRenderer: function (str) {
+ return `${str}
`
+ }
+})
let originalRenderToken = md.renderer.renderToken
md.renderer.renderToken = function renderToken (tokens, idx, options) {
diff --git a/browser/styles/mixins/marked.styl b/browser/styles/mixins/marked.styl
index db7aa1e3..afbfe684 100644
--- a/browser/styles/mixins/marked.styl
+++ b/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
diff --git a/katex.min.css b/katex.min.css
new file mode 100644
index 00000000..e69de29b
diff --git a/lib/finder.html b/lib/finder.html
index 0593c2c8..1af7e95c 100644
--- a/lib/finder.html
+++ b/lib/finder.html
@@ -15,9 +15,9 @@