Add support for CHTML

Closes GH-43.
Closes GH-42.

Reviewed-by: Titus Wormer <tituswormer@gmail.com>

packages/rehype-mathjax/chtml.js

@@ -0,0 +1,36 @@
+const visit = require('unist-util-visit')
+const toText = require('hast-util-to-text')
+const ChtmlRenderer = require('./renderer/chtml')
+
+module.exports = rehypeMathJaxChtml
+
+function rehypeMathJaxChtml(options = {}) {
+  return transformMath
+
+  function transformMath(tree) {
+    const renderer = new ChtmlRenderer(options)
+
+    let found = false
+
+    visit(tree, 'element', onelement)
+
+    if (found) {
+      tree.children.push(renderer.styleSheet)
+    }
+
+    function onelement(element) {
+      const classes = element.properties.className || []
+      const inline = classes.includes('math-inline')
+      const display = classes.includes('math-display')
+
+      if (!inline && !display) {
+        return
+      }
+
+      found = true
+      element.children = [renderer.render(toText(element), {display: display})]
+
+      return visit.SKIP
+    }
+  }
+}

packages/rehype-mathjax/index.js

@@ -1,34 +1 @@
-const visit = require('unist-util-visit')
-const toText = require('hast-util-to-text')
-const renderer = require('./renderer')
-
-module.exports = rehypeMathJax
-
-function rehypeMathJax() {
-  return transformMath
-}
-
-function transformMath(tree) {
-  let found = false
-
-  visit(tree, 'element', onelement)
-
-  if (found) {
-    tree.children.push(renderer.styleSheet())
-  }
-
-  function onelement(element) {
-    const classes = element.properties.className || []
-    const inline = classes.includes('math-inline')
-    const display = classes.includes('math-display')
-
-    if (!inline && !display) {
-      return
-    }
-
-    found = true
-    element.children = [renderer.render(toText(element), {display: display})]
-
-    return visit.SKIP
-  }
-}
+module.exports = require('./svg')

packages/rehype-mathjax/package.json

@@ -25,7 +25,7 @@
     "url": "https://opencollective.com/unified"
   },
   "browser": {
-    "./renderer": "./browser-renderer"
+    "./renderer/node": "./renderer/browser"
   },
   "author": "TANIGUCHI Masaya <taniguchi.masaya@yandex.com> (https://docs.casa)",
   "files": [

packages/rehype-mathjax/renderer/browser.js

@@ -0,0 +1,32 @@
+const fromDom = require('hast-util-from-dom')
+const {browserAdaptor} = require('mathjax-full/js/adaptors/browserAdaptor')
+const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html')
+
+class AbstractRenderer {
+  constructor() {
+    this.adaptor = browserAdaptor()
+    RegisterHTMLHandler(this.adaptor)
+  }
+
+  get styleSheet() {
+    return {
+      type: 'element',
+      tagName: 'style',
+      properties: {},
+      children: [
+        {
+          type: 'text',
+          value: this.adaptor.textContent(
+            this.OutputJax.styleSheet(this.mathDocument)
+          )
+        }
+      ]
+    }
+  }
+
+  render(latex, options) {
+    return fromDom(this.mathDocument.convert(latex, options))
+  }
+}
+
+module.exports = AbstractRenderer

packages/rehype-mathjax/renderer/chtml.js

@@ -0,0 +1,19 @@
+const {mathjax} = require('mathjax-full/js/mathjax')
+const {TeX} = require('mathjax-full/js/input/tex')
+const {CHTML} = require('mathjax-full/js/output/chtml')
+const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages')
+const AbstractRenderer = require('./node')
+
+class ChtmlRenderer extends AbstractRenderer {
+  constructor(options) {
+    super()
+    this.InputJax = new TeX({packages: AllPackages})
+    this.OutputJax = new CHTML(options)
+    this.mathDocument = mathjax.document('', {
+      InputJax: this.InputJax,
+      OutputJax: this.OutputJax
+    })
+  }
+}
+
+module.exports = ChtmlRenderer

packages/rehype-mathjax/renderer/node.js

@@ -0,0 +1,33 @@
+const fromDom = require('hast-util-from-dom')
+const {JSDOM} = require('jsdom')
+const {jsdomAdaptor} = require('mathjax-full/js/adaptors/jsdomAdaptor')
+const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html')
+
+class AbstractRenderer {
+  constructor() {
+    this.adaptor = jsdomAdaptor(JSDOM)
+    RegisterHTMLHandler(this.adaptor)
+  }
+
+  get styleSheet() {
+    return {
+      type: 'element',
+      tagName: 'style',
+      properties: {},
+      children: [
+        {
+          type: 'text',
+          value: this.adaptor.textContent(
+            this.OutputJax.styleSheet(this.mathDocument)
+          )
+        }
+      ]
+    }
+  }
+
+  render(latex, options) {
+    return fromDom(this.mathDocument.convert(latex, options))
+  }
+}
+
+module.exports = AbstractRenderer

packages/rehype-mathjax/renderer/svg.js

@@ -0,0 +1,19 @@
+const {mathjax} = require('mathjax-full/js/mathjax')
+const {TeX} = require('mathjax-full/js/input/tex')
+const {SVG} = require('mathjax-full/js/output/svg')
+const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages')
+const AbstractRenderer = require('./node')
+
+class SvgRenderer extends AbstractRenderer {
+  constructor(options) {
+    super()
+    this.InputJax = new TeX({packages: AllPackages})
+    this.OutputJax = new SVG(options)
+    this.mathDocument = mathjax.document('', {
+      InputJax: this.InputJax,
+      OutputJax: this.OutputJax
+    })
+  }
+}
+
+module.exports = SvgRenderer

packages/rehype-mathjax/svg.js

@@ -0,0 +1,36 @@
+const visit = require('unist-util-visit')
+const toText = require('hast-util-to-text')
+const SvgRenderer = require('./renderer/svg')
+
+module.exports = rehypeMathJaxSVG
+
+function rehypeMathJaxSVG(options = {}) {
+  return transformMath
+
+  function transformMath(tree) {
+    const renderer = new SvgRenderer(options)
+
+    let found = false
+
+    visit(tree, 'element', onelement)
+
+    if (found) {
+      tree.children.push(renderer.styleSheet)
+    }
+
+    function onelement(element) {
+      const classes = element.properties.className || []
+      const inline = classes.includes('math-inline')
+      const display = classes.includes('math-display')
+
+      if (!inline && !display) {
+        return
+      }
+
+      found = true
+      element.children = [renderer.render(toText(element), {display: display})]
+
+      return visit.SKIP
+    }
+  }
+}