Add mathjax support

background/background.js

@@ -10,7 +10,8 @@ var defaults = {
   content: {
     emoji: false,
     scroll: true,
-    toc: false
+    toc: false,
+    mathjax: false,
   },
   raw: false,
   header: true,
@@ -72,6 +73,9 @@ chrome.storage.sync.get((res) => {
   if (options.remark && options.remark.yaml) {
     delete options.remark.yaml
   }
+  if (options.content.mathjax === undefined) {
+    options.content.mathjax = false
+  }
 
   Object.keys(md).forEach((compiler) => {
     if (!options[compiler]) {
@@ -148,7 +152,20 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
 
 chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
   if (req.message === 'markdown') {
-    md[state.compiler].compile(req.markdown, sendResponse)
+    var markdown = req.markdown
+
+    if (state.content.mathjax) {
+      var m = mathjax()
+      markdown = m.tokenize(markdown)
+    }
+
+    var html = md[state.compiler].compile(markdown)
+
+    if (state.content.mathjax) {
+      html = m.detokenize(html)
+    }
+
+    sendResponse({message: 'html', html})
   }
   else if (req.message === 'settings') {
     sendResponse(Object.assign({}, state, {

background/marked.js

@@ -21,10 +21,6 @@ md.marked = {
     smartypants: 'Use "smart" typographic punctuation\nfor things like quotes and dashes',
     tables: 'Enable GFM tables\n(requires the gfm option to be true)'
   },
-  compile: (markdown, sendResponse) => {
-    chrome.storage.sync.get('marked', (res) => {
-      var html = marked(markdown, res.marked)
-      sendResponse({message: 'html', html})
-    })
-  }
+  compile: (markdown) =>
+    marked(markdown, state.marked)
 }

background/mathjax.js

@@ -0,0 +1,28 @@
+
+var mathjax = (
+  (
+    math = new RegExp([
+      /\$\$[^$$]*\$\$/,
+      /\\\[[^\]]*\\\]/,
+      /\\begin\{[^}]*\}[\s\S]*?\\end\{[^}]*\}/,
+      /\\\(.*\\\)/,
+      /\$.*\$/
+    ].map((regex) => `(?:${regex.source})`).join('|'), 'gi')
+  ) => () => (
+    (
+      map = {}
+    ) => ({
+      tokenize: (markdown) =>
+        markdown.replace(math, (str, offset) => (
+          map[offset] = str,
+          `.?.${offset}.?.`
+        )),
+      detokenize: (html) => (
+        Object.keys(map).forEach((offset) =>
+          html = html.replace(`.?.${offset}.?.`, map[offset])),
+        delete map,
+        html
+      )
+    })
+  )()
+)()

background/remark.js

@@ -17,17 +17,13 @@ md.remark = {
     pedantic: 'Don\'t fix any of the original markdown\nbugs or poor behavior',
     sanitize: 'Disable HTML tag rendering',
   },
-  compile: (markdown, sendResponse) => {
-    chrome.storage.sync.get('remark', (res) => {
-      var html = remark.unified()
-        .use(remark.parse, res.remark)
-        .use(remark.stringify)
-        .use(remarkSlug)
-        .use(remarkFrontmatter, ['yaml', 'toml'])
-        .use(remarkHTML, res.remark) // sanitize
-        .processSync(markdown)
-        .contents
-      sendResponse({message: 'html', html})
-    })
-  }
+  compile: (markdown) =>
+    remark.unified()
+      .use(remark.parse, state.remark)
+      .use(remark.stringify)
+      .use(remarkSlug)
+      .use(remarkFrontmatter, ['yaml', 'toml'])
+      .use(remarkHTML, state.remark) // sanitize
+      .processSync(markdown)
+      .contents
 }

content/content.js

@@ -95,6 +95,50 @@ function mount () {
             dom.push(m.trust(state.toc))
             $('body').classList.add('_toc-left')
           }
+          if (state.content.mathjax) {
+            dom.push(m('script', {type: 'text/x-mathjax-config',}, `
+              // TeX-AMS_HTML
+              MathJax.Hub.Config({
+                jax: [
+                  'input/TeX',
+                  'output/HTML-CSS',
+                  'output/PreviewHTML',
+                ],
+                extensions: [
+                  'tex2jax.js',
+                  'AssistiveMML.js',
+                  'a11y/accessibility-menu.js',
+                ],
+                TeX: {
+                  extensions: [
+                    'AMSmath.js',
+                    'AMSsymbols.js',
+                    'noErrors.js',
+                    'noUndefined.js',
+                  ]
+                },
+                tex2jax: {
+                  inlineMath: [
+                    ['$', '$'],
+                    ['\\(', '\\)'],
+                    ['\\\\(', '\\\\)'],
+                  ],
+                  displayMath: [
+                    ['$$', '$$'],
+                    ['\\[', '\\]'],
+                    ['\\\\[', '\\\\]'],
+                  ],
+                  processEscapes: true
+                },
+                showMathMenu: false,
+                showProcessingMessages: false,
+                messageStyle: 'none',
+              })
+            `))
+            dom.push(m('script', {
+              src: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js'
+            }))
+          }
         }
       }
 

manifest.json

@@ -22,6 +22,7 @@
       "/vendor/remark-html.min.js",
       "/vendor/remark-slug.min.js",
       "/vendor/remark-frontmatter.min.js",
+      "/background/mathjax.js",
       "/background/marked.js",
       "/background/remark.js",
       "/background/background.js"