From 5928dab817e1ff99a06a59a25105adf0d80b5544 Mon Sep 17 00:00:00 2001 From: TANIGUCHI Masaya Date: Thu, 16 Apr 2020 13:28:41 +0900 Subject: [PATCH 1/7] Add rehype-mathjax --- packages/rehype-mathjax/browser-renderer.js | 23 ++ packages/rehype-mathjax/index.js | 23 ++ packages/rehype-mathjax/package.json | 48 ++++ packages/rehype-mathjax/readme.md | 260 ++++++++++++++++++++ packages/rehype-mathjax/renderer.js | 24 ++ packages/rehype-mathjax/test.js | 121 +++++++++ readme.md | 6 + 7 files changed, 505 insertions(+) create mode 100644 packages/rehype-mathjax/browser-renderer.js create mode 100644 packages/rehype-mathjax/index.js create mode 100644 packages/rehype-mathjax/package.json create mode 100644 packages/rehype-mathjax/readme.md create mode 100644 packages/rehype-mathjax/renderer.js create mode 100644 packages/rehype-mathjax/test.js diff --git a/packages/rehype-mathjax/browser-renderer.js b/packages/rehype-mathjax/browser-renderer.js new file mode 100644 index 0000000..a227445 --- /dev/null +++ b/packages/rehype-mathjax/browser-renderer.js @@ -0,0 +1,23 @@ +const fromDom = require('hast-util-from-dom') +const {mathjax} = require('mathjax-full/js/mathjax') +const {TeX} = require('mathjax-full/js/input/tex') +const {SVG} = require('mathjax-full/js/output/svg') +const {browserAdaptor} = require('mathjax-full/js/adaptors/browserAdaptor') +const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html') +const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages') + +const adaptor = browserAdaptor() +Reflect.apply(RegisterHTMLHandler, null, [adaptor]) +const tex = new TeX({packages: AllPackages}) +const svg = new SVG({fontCache: 'none'}) +const mathDocument = mathjax.document('', {InputJax: tex, OutputJax: svg}) +const stylesheet = adaptor.textContent(svg.styleSheet(mathDocument)) + +module.exports.stylesheet = () => ({ + type: 'element', + tagName: 'style', + properties: {}, + children: [{type: 'text', value: stylesheet}] +}) +module.exports.render = (math, options) => + fromDom(mathDocument.convert(math, options)) diff --git a/packages/rehype-mathjax/index.js b/packages/rehype-mathjax/index.js new file mode 100644 index 0000000..10ce5c5 --- /dev/null +++ b/packages/rehype-mathjax/index.js @@ -0,0 +1,23 @@ +const visit = require('unist-util-visit') +const toText = require('hast-util-to-text') +const renderer = require('./renderer') + +module.exports = () => { + return (tree) => { + var found = false + visit(tree, 'element', (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})] + }) + if (found) { + tree.children.push(renderer.stylesheet()) + } + } +} diff --git a/packages/rehype-mathjax/package.json b/packages/rehype-mathjax/package.json new file mode 100644 index 0000000..301f2fa --- /dev/null +++ b/packages/rehype-mathjax/package.json @@ -0,0 +1,48 @@ +{ + "name": "rehype-mathjax", + "version": "0.1.0", + "description": "rehype plugin to transform inline and block math with MathJax", + "license": "MIT", + "keywords": [ + "unified", + "remark", + "rehype", + "rehype-plugin", + "plugin", + "mdast", + "markdown", + "hast", + "html", + "math", + "mathjax", + "latex", + "tex" + ], + "repository": "https://github.com/remarkjs/remark-math/tree/master/packages/rehype-mathjax", + "bugs": "https://github.com/remarkjs/remark-math/issues", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "browser": { + "./renderer": "./browser-renderer" + }, + "author": "TANIGUCHI Masaya (https://docs.casa)", + "files": [ + "renderer.js", + "browser-renderer.js", + "index.js" + ], + "main": "index.js", + "dependencies": { + "hast-util-from-dom": "^2.0.5", + "hast-util-to-html": "^7.1.0", + "hast-util-to-text": "^2.0.0", + "jsdom": "^16.2.2", + "mathjax-full": "^3.0.5", + "unified": "^8.0.0", + "unist-util-visit": "^2.0.0" + }, + "devDependencies": {}, + "xo": false +} diff --git a/packages/rehype-mathjax/readme.md b/packages/rehype-mathjax/readme.md new file mode 100644 index 0000000..700f150 --- /dev/null +++ b/packages/rehype-mathjax/readme.md @@ -0,0 +1,260 @@ +# rehype-mathjax + +[![Build][build-badge]][build] +[![Coverage][coverage-badge]][coverage] +[![Downloads][downloads-badge]][downloads] +[![Size][size-badge]][size] +[![Sponsors][sponsors-badge]][collective] +[![Backers][backers-badge]][collective] +[![Chat][chat-badge]][chat] + +[**rehype**][rehype] plugin to transform `` and +`
` with [MathJax][]. + +## Install + +[npm][]: + +```sh +npm install rehype-mathjax +``` + +## Use + +Say we have the following file, `example.html`: + +```html +

+ Lift(L) can be determined by Lift Coefficient + (C_L) like the following equation. +

+ +
+ L = \frac{1}{2} \rho v^2 S C_L +
+``` + +And our script, `example.js`, looks as follows: + +```js +const vfile = require('to-vfile') +const unified = require('unified') +const parse = require('rehype-parse') +const mathjax = require('rehype-mathjax') +const stringify = require('rehype-stringify') + +unified() + .use(parse, {fragment: true}) + .use(mathjax) + .use(stringify) + .process(vfile.readSync('example.html'), function(err, file) { + if (err) throw err + console.log(String(file)) + }) +``` + +Now, running `node example` yields: + +```html +

+ Lift() can be determined by Lift Coefficient + () like the following equation. +

+ +
+ + +``` + +## API + +### `rehype().use(mathjax)` + +Transform `` and `
` with +[MathJax][]. + +## Security + +Use of `rehype-mathjax` renders user content with [MathJax][], +so any vulnerability in MathJax can open you +to a [cross-site scripting (XSS)][xss] attack. + +Always be wary of user input and use [`rehype-sanitize`][rehype-sanitize]. + +## Contribute + +See [`contributing.md`][contributing] in [`remarkjs/.github`][health] for ways +to get started. +See [`support.md`][support] for ways to get help. + +This project has a [code of conduct][coc]. +By interacting with this repository, organization, or community you agree to +abide by its terms. + +## License + +[MIT][license] © [TANIGUCHI Masaya][author] + + + +[build-badge]: https://img.shields.io/travis/remarkjs/remark-math/master.svg + +[build]: https://travis-ci.org/remarkjs/remark-math + +[coverage-badge]: https://img.shields.io/codecov/c/github/remarkjs/remark-math.svg + +[coverage]: https://codecov.io/github/remarkjs/remark-math + +[downloads-badge]: https://img.shields.io/npm/dm/rehype-mathjax.svg + +[downloads]: https://www.npmjs.com/package/rehype-mathjax + +[size-badge]: https://img.shields.io/bundlephobia/minzip/rehype-mathjax.svg + +[size]: https://bundlephobia.com/result?p=rehype-mathjax + +[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg + +[backers-badge]: https://opencollective.com/unified/backers/badge.svg + +[collective]: https://opencollective.com/unified + +[chat-badge]: https://img.shields.io/badge/chat-spectrum-7b16ff.svg + +[chat]: https://spectrum.chat/unified/remark + +[npm]: https://docs.npmjs.com/cli/install + +[health]: https://github.com/remarkjs/.github + +[contributing]: https://github.com/remarkjs/.github/blob/master/contributing.md + +[support]: https://github.com/remarkjs/.github/blob/master/support.md + +[coc]: https://github.com/remarkjs/.github/blob/master/code-of-conduct.md + +[license]: https://github.com/remarkjs/remark-math/blob/master/license + +[author]: https://rokt33r.github.io + +[rehype]: https://github.com/rehypejs/rehype + +[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting + +[rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize + +[mathjax]: https://mathjax.org/ diff --git a/packages/rehype-mathjax/renderer.js b/packages/rehype-mathjax/renderer.js new file mode 100644 index 0000000..abdb628 --- /dev/null +++ b/packages/rehype-mathjax/renderer.js @@ -0,0 +1,24 @@ +const fromDom = require('hast-util-from-dom') +const {JSDOM} = require('jsdom') +const {mathjax} = require('mathjax-full/js/mathjax') +const {TeX} = require('mathjax-full/js/input/tex') +const {SVG} = require('mathjax-full/js/output/svg') +const {jsdomAdaptor} = require('mathjax-full/js/adaptors/jsdomAdaptor') +const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html') +const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages') + +const adaptor = jsdomAdaptor(JSDOM) +Reflect.apply(RegisterHTMLHandler, null, [adaptor]) +const tex = new TeX({packages: AllPackages}) +const svg = new SVG({fontCache: 'none'}) +const mathDocument = mathjax.document('', {InputJax: tex, OutputJax: svg}) +const stylesheet = adaptor.textContent(svg.styleSheet(mathDocument)) + +module.exports.stylesheet = () => ({ + type: 'element', + tagName: 'style', + properties: {}, + children: [{type: 'text', value: stylesheet}] +}) +module.exports.render = (math, options) => + fromDom(mathDocument.convert(math, options)) diff --git a/packages/rehype-mathjax/test.js b/packages/rehype-mathjax/test.js new file mode 100644 index 0000000..8b9b7e5 --- /dev/null +++ b/packages/rehype-mathjax/test.js @@ -0,0 +1,121 @@ +const test = require('tape') +const renderer = require('./renderer') +const unified = require('unified') +const parseMarkdown = require('remark-parse') +const remark2rehype = require('remark-rehype') +const parseHtml = require('rehype-parse') +const stringify = require('rehype-stringify') +const math = require('../remark-math') +const rehypeMathjax = require('.') +const toHtml = require('hast-util-to-html') + +test('rehype-mathjax', function (t) { + t.deepEqual( + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(rehypeMathjax) + .use(stringify) + .processSync( + [ + '

Inline math \\alpha.

', + '

Block math:

', + '
\\gamma
' + ].join('\n') + ) + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync( + [ + '

Inline math ' + + toHtml(renderer.render('\\alpha', {display: false})) + + '.

', + '

Block math:

', + '
' + + toHtml(renderer.render('\\gamma', {display: true})) + + '
' + + toHtml(renderer.stylesheet()) + ].join('\n') + ) + .toString(), + 'should transform math with mathjax' + ) + + t.deepEqual( + unified() + .use(parseMarkdown, {position: false}) + .use(math) + .use(remark2rehype) + .use(rehypeMathjax) + .use(stringify) + .processSync( + [ + 'Inline math $\\alpha$.', + '', + 'Block math:', + '', + '$$', + '\\gamma', + '$$' + ].join('\n') + ) + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync( + [ + '

Inline math ' + + toHtml(renderer.render('\\alpha', {display: false})) + + '.

', + '

Block math:

', + '
' + + toHtml(renderer.render('\\gamma', {display: true})) + + '
' + + toHtml(renderer.stylesheet()) + ].join('\n') + ) + .toString(), + 'should integrate with `remark-math`' + ) + + t.deepEqual( + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(rehypeMathjax) + .use(stringify) + .processSync( + '

Double math \\alpha.

' + ) + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync( + '

Double math ' + + toHtml(renderer.render('\\alpha', {display: true})) + + '.

' + + toHtml(renderer.stylesheet()) + ) + .toString(), + 'should transform `.math-inline.math-display` math with `displayMode: true`' + ) + + t.deepEqual( + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(rehypeMathjax) + .use(stringify) + .processSync('

No math

') + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync('

No math

') + .toString(), + 'Should not be insert stylesheet if it is no math' + ) + + t.end() +}) diff --git a/readme.md b/readme.md index fb7766b..1e072c7 100644 --- a/readme.md +++ b/readme.md @@ -81,6 +81,8 @@ This repo houses three packages: * [`rehype-katex`][rehype-katex] — Transforms math nodes with [KaTeX][] (recommended) +* [`rehype-mathjax`][rehype-mathjax] + — Transforms math nodes with [MathJax][] * [`remark-html-katex`][remark-html-katex] — Transforms math nodes with [KaTeX][] for [`remark-html`][remark-html] (discouraged) @@ -176,12 +178,16 @@ abide by its terms. [katex]: https://github.com/Khan/KaTeX +[mathjax]: https://mathjax.org/ + [xss]: https://en.wikipedia.org/wiki/Cross-site_scripting [remark-math]: ./packages/remark-math [rehype-katex]: ./packages/rehype-katex +[rehype-mathjax]: ./packages/rehype-mathjax + [remark-html-katex]: ./packages/remark-html-katex [screenshot]: screenshot.png From 4805dd555ed324c88c0af27709d80d91892d2688 Mon Sep 17 00:00:00 2001 From: TANIGUCHI MASAYA Date: Tue, 21 Apr 2020 19:01:06 +0900 Subject: [PATCH 2/7] Add CHTML output processor --- packages/rehype-mathjax/index.js | 50 +- packages/rehype-mathjax/readme.md | 711 +++++++++++++++++++++++++--- packages/rehype-mathjax/renderer.js | 65 ++- packages/rehype-mathjax/test.js | 230 +++++---- 4 files changed, 854 insertions(+), 202 deletions(-) diff --git a/packages/rehype-mathjax/index.js b/packages/rehype-mathjax/index.js index 58ffe67..6a91851 100644 --- a/packages/rehype-mathjax/index.js +++ b/packages/rehype-mathjax/index.js @@ -1,34 +1,46 @@ const visit = require('unist-util-visit') const toText = require('hast-util-to-text') -const renderer = require('./renderer') +const {SVGRenderer, CHTMLRenderer} = require('./renderer') module.exports = rehypeMathJax -function rehypeMathJax() { +function rehypeMathJax(output, options = {}) { return transformMath -} - -function transformMath(tree) { - let found = false - visit(tree, 'element', onelement) + function transformMath(tree) { + let renderer + switch (output) { + case 'chtml': + renderer = new CHTMLRenderer(options) + break + case 'svg': + renderer = new SVGRenderer(options) + break + default: + throw new Error(`'${output}' is neither 'chtml' nor 'svg'`) + } - if (found) { - tree.children.push(renderer.styleSheet()) - } + let found = false - function onelement(element) { - const classes = element.properties.className || [] - const inline = classes.includes('math-inline') - const display = classes.includes('math-display') + visit(tree, 'element', onelement) - if (!inline && !display) { - return + if (found) { + tree.children.push(renderer.styleSheet) } - found = true - element.children = [renderer.render(toText(element), {display: display})] + function onelement(element) { + const classes = element.properties.className || [] + const inline = classes.includes('math-inline') + const display = classes.includes('math-display') - return visit.SKIP + if (!inline && !display) { + return + } + + found = true + element.children = [renderer.render(toText(element), {display: display})] + + return visit.SKIP + } } } diff --git a/packages/rehype-mathjax/readme.md b/packages/rehype-mathjax/readme.md index 700f150..276d151 100644 --- a/packages/rehype-mathjax/readme.md +++ b/packages/rehype-mathjax/readme.md @@ -21,6 +21,19 @@ npm install rehype-mathjax ## Use +### API + +```js +unified().use(rehypeMathjax, output, options) +``` + +* `ouput`: Which output format does plugin use, `'chtml'` or `'svg'` +* `options`: MathJax ouput options for + [CommonHTML ouput processor](http://docs.mathjax.org/en/latest/options/output/chtml.html) + and [SVG ouput processor](http://docs.mathjax.org/en/latest/options/output/svg.html) + +### Example + Say we have the following file, `example.html`: ```html @@ -37,17 +50,11 @@ Say we have the following file, `example.html`: And our script, `example.js`, looks as follows: ```js -const vfile = require('to-vfile') -const unified = require('unified') -const parse = require('rehype-parse') -const mathjax = require('rehype-mathjax') -const stringify = require('rehype-stringify') - unified() .use(parse, {fragment: true}) - .use(mathjax) + .use(mathjax, 'chtml', {fontURL: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.5/es5/output/chtml/fonts/woff-v2/'}) .use(stringify) - .process(vfile.readSync('example.html'), function(err, file) { + .process(vfile.readSync('example.html'), function (err, file) { if (err) throw err console.log(String(file)) }) @@ -57,125 +64,681 @@ Now, running `node example` yields: ```html

- Lift() can be determined by Lift Coefficient - () like the following equation. + Lift() can be determined by Lift Coefficient + () like the following equation.

-
+
``` diff --git a/packages/rehype-mathjax/renderer.js b/packages/rehype-mathjax/renderer.js index 12e6c66..7976a25 100644 --- a/packages/rehype-mathjax/renderer.js +++ b/packages/rehype-mathjax/renderer.js @@ -3,30 +3,61 @@ const {JSDOM} = require('jsdom') const {mathjax} = require('mathjax-full/js/mathjax') const {TeX} = require('mathjax-full/js/input/tex') const {SVG} = require('mathjax-full/js/output/svg') +const {CHTML} = require('mathjax-full/js/output/chtml') const {jsdomAdaptor} = require('mathjax-full/js/adaptors/jsdomAdaptor') const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html') const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages') -exports.styleSheet = styleSheet -exports.render = render +class AbstractRenderer { + constructor() { + this.adaptor = jsdomAdaptor(JSDOM) + RegisterHTMLHandler(this.adaptor) + } -const adaptor = jsdomAdaptor(JSDOM) -RegisterHTMLHandler(adaptor) -const tex = new TeX({packages: AllPackages}) -const svg = new SVG({fontCache: 'none'}) -const mathDocument = mathjax.document('', {InputJax: tex, OutputJax: svg}) + get styleSheet() { + return { + type: 'element', + tagName: 'style', + properties: {}, + children: [ + { + type: 'text', + value: this.adaptor.textContent( + this.OutputJax.styleSheet(this.mathDocument) + ) + } + ] + } + } -function styleSheet() { - return { - type: 'element', - tagName: 'style', - properties: {}, - children: [ - {type: 'text', value: adaptor.textContent(svg.styleSheet(mathDocument))} - ] + render(latex, options) { + return fromDom(this.mathDocument.convert(latex, options)) } } -function render(math, options) { - return fromDom(mathDocument.convert(math, options)) +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 + }) + } } + +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 + }) + } +} + +exports.SVGRenderer = SVGRenderer +exports.CHTMLRenderer = CHTMLRenderer diff --git a/packages/rehype-mathjax/test.js b/packages/rehype-mathjax/test.js index 8614c6e..989aa9f 100644 --- a/packages/rehype-mathjax/test.js +++ b/packages/rehype-mathjax/test.js @@ -1,5 +1,5 @@ const test = require('tape') -const renderer = require('./renderer') +const {SVGRenderer, CHTMLRenderer} = require('./renderer') const unified = require('unified') const parseMarkdown = require('remark-parse') const remark2rehype = require('remark-rehype') @@ -10,111 +10,157 @@ const rehypeMathjax = require('.') const toHtml = require('hast-util-to-html') test('rehype-mathjax', function (t) { - t.deepEqual( - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax) - .use(stringify) - .processSync( - [ - '

Inline math \\alpha.

', - '

Block math:

', - '
\\gamma
' - ].join('\n') - ) - .toString(), - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(stringify) - .processSync( - [ - '

Inline math ' + - toHtml(renderer.render('\\alpha', {display: false})) + - '.

', - '

Block math:

', - '
' + - toHtml(renderer.render('\\gamma', {display: true})) + - '
' + - toHtml(renderer.styleSheet()) - ].join('\n') - ) - .toString(), - 'should transform math with mathjax' + t.throws( + () => { + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(rehypeMathjax, '', {}) + .use(stringify) + .processSync('') + .toString() + }, + "'' is neither 'chtml' nor 'svg'", + "'' is neither 'chtml' nor 'svg'" ) - t.deepEqual( - unified() - .use(parseMarkdown, {position: false}) - .use(math) - .use(remark2rehype) - .use(rehypeMathjax) - .use(stringify) - .processSync( - [ - 'Inline math $\\alpha$.', - '', - 'Block math:', - '', - '$$', - '\\gamma', - '$$' - ].join('\n') - ) - .toString(), - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(stringify) - .processSync( - [ - '

Inline math ' + - toHtml(renderer.render('\\alpha', {display: false})) + - '.

', - '

Block math:

', - '
' + - toHtml(renderer.render('\\gamma', {display: true})) + - '
' + - toHtml(renderer.styleSheet()) - ].join('\n') - ) - .toString(), - 'should integrate with `remark-math`' - ) + for (const output of ['chtml', 'svg']) { + let renderer + let options + if (output === 'chtml') { + options = {} + renderer = new CHTMLRenderer(options) + } else { + options = {fontCache: 'none'} + renderer = new SVGRenderer(options) + } + + t.deepEqual( + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(rehypeMathjax, output, options) + .use(stringify) + .processSync( + [ + '

Inline math \\alpha.

', + '

Block math:

', + '
\\gamma
' + ].join('\n') + ) + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync( + [ + '

Inline math ' + + toHtml(renderer.render('\\alpha', {display: false})) + + '.

', + '

Block math:

', + '
' + + toHtml(renderer.render('\\gamma', {display: true})) + + '
' + + toHtml(renderer.styleSheet) + ].join('\n') + ) + .toString(), + `should transform math with mathjax with ${output}` + ) + + t.deepEqual( + unified() + .use(parseMarkdown, {position: false}) + .use(math) + .use(remark2rehype) + .use(rehypeMathjax, output, options) + .use(stringify) + .processSync( + [ + 'Inline math $\\alpha$.', + '', + 'Block math:', + '', + '$$', + '\\gamma', + '$$' + ].join('\n') + ) + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync( + [ + '

Inline math ' + + toHtml(renderer.render('\\alpha', {display: false})) + + '.

', + '

Block math:

', + '
' + + toHtml(renderer.render('\\gamma', {display: true})) + + '
' + + toHtml(renderer.styleSheet) + ].join('\n') + ) + .toString(), + `should integrate with 'remark-math' with ${output}` + ) + t.deepEqual( + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(rehypeMathjax, output, options) + .use(stringify) + .processSync( + '

Double math \\alpha.

' + ) + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync( + '

Double math ' + + toHtml(renderer.render('\\alpha', {display: true})) + + '.

' + + toHtml(renderer.styleSheet) + ) + .toString(), + `should transform \`.math-inline.math-display\` math with \`displayMode: true\` with ${output}` + ) + + t.deepEqual( + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(rehypeMathjax, output, options) + .use(stringify) + .processSync('

No math

') + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync('

No math

') + .toString(), + `Should not be insert stylesheet if it is no math with ${output}` + ) + } + + const renderer = new CHTMLRenderer() t.deepEqual( unified() .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax) + .use(rehypeMathjax, 'chtml') .use(stringify) - .processSync( - '

Double math \\alpha.

' - ) + .processSync('x') .toString(), unified() .use(parseHtml, {fragment: true, position: false}) .use(stringify) .processSync( - '

Double math ' + - toHtml(renderer.render('\\alpha', {display: true})) + - '.

' + - toHtml(renderer.styleSheet()) + '' + + toHtml(renderer.render('x', {display: false})) + + '' + + toHtml(renderer.styleSheet) ) .toString(), - 'should transform `.math-inline.math-display` math with `displayMode: true`' - ) - - t.deepEqual( - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax) - .use(stringify) - .processSync('

No math

') - .toString(), - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(stringify) - .processSync('

No math

') - .toString(), - 'Should not be insert stylesheet if it is no math' + `Default options is \`{}\`` ) t.end() From 6c4c83e61de27f13925083b51ff7d794f28ad544 Mon Sep 17 00:00:00 2001 From: TANIGUCHI MASAYA Date: Tue, 21 Apr 2020 19:05:49 +0900 Subject: [PATCH 3/7] Update browser-renderer --- packages/rehype-mathjax/browser-renderer.js | 65 +++++++++++++++------ 1 file changed, 48 insertions(+), 17 deletions(-) diff --git a/packages/rehype-mathjax/browser-renderer.js b/packages/rehype-mathjax/browser-renderer.js index 65fe60d..5acc291 100644 --- a/packages/rehype-mathjax/browser-renderer.js +++ b/packages/rehype-mathjax/browser-renderer.js @@ -2,30 +2,61 @@ const fromDom = require('hast-util-from-dom') const {mathjax} = require('mathjax-full/js/mathjax') const {TeX} = require('mathjax-full/js/input/tex') const {SVG} = require('mathjax-full/js/output/svg') +const {CHTML} = require('mathjax-full/js/output/chtml') const {browserAdaptor} = require('mathjax-full/js/adaptors/browserAdaptor') const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html') const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages') -exports.styleSheet = styleSheet -exports.render = render +class AbstractRenderer { + constructor() { + this.adaptor = browserAdaptor() + RegisterHTMLHandler(this.adaptor) + } -const adaptor = browserAdaptor() -RegisterHTMLHandler(adaptor) -const tex = new TeX({packages: AllPackages}) -const svg = new SVG({fontCache: 'none'}) -const mathDocument = mathjax.document('', {InputJax: tex, OutputJax: svg}) + get styleSheet() { + return { + type: 'element', + tagName: 'style', + properties: {}, + children: [ + { + type: 'text', + value: this.adaptor.textContent( + this.OutputJax.styleSheet(this.mathDocument) + ) + } + ] + } + } -function styleSheet() { - return { - type: 'element', - tagName: 'style', - properties: {}, - children: [ - {type: 'text', value: adaptor.textContent(svg.styleSheet(mathDocument))} - ] + render(latex, options) { + return fromDom(this.mathDocument.convert(latex, options)) } } -function render(math, options) { - return fromDom(mathDocument.convert(math, options)) +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 + }) + } } + +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 + }) + } +} + +exports.SVGRenderer = SVGRenderer +exports.CHTMLRenderer = CHTMLRenderer From d17449c49c6b77b6dd98094cda3e3c0a8c7e8d14 Mon Sep 17 00:00:00 2001 From: TANIGUCHI MASAYA Date: Tue, 21 Apr 2020 21:19:35 +0900 Subject: [PATCH 4/7] Reduce bundle size --- packages/rehype-mathjax/browser-renderer.js | 62 -------------------- packages/rehype-mathjax/chtml.js | 36 ++++++++++++ packages/rehype-mathjax/index.js | 48 +--------------- packages/rehype-mathjax/package.json | 2 +- packages/rehype-mathjax/readme.md | 8 ++- packages/rehype-mathjax/renderer.js | 63 -------------------- packages/rehype-mathjax/renderer/browser.js | 32 +++++++++++ packages/rehype-mathjax/renderer/chtml.js | 19 ++++++ packages/rehype-mathjax/renderer/node.js | 33 +++++++++++ packages/rehype-mathjax/renderer/svg.js | 19 ++++++ packages/rehype-mathjax/svg.js | 36 ++++++++++++ packages/rehype-mathjax/test.js | 64 +++++++-------------- 12 files changed, 205 insertions(+), 217 deletions(-) delete mode 100644 packages/rehype-mathjax/browser-renderer.js create mode 100644 packages/rehype-mathjax/chtml.js delete mode 100644 packages/rehype-mathjax/renderer.js create mode 100644 packages/rehype-mathjax/renderer/browser.js create mode 100644 packages/rehype-mathjax/renderer/chtml.js create mode 100644 packages/rehype-mathjax/renderer/node.js create mode 100644 packages/rehype-mathjax/renderer/svg.js create mode 100644 packages/rehype-mathjax/svg.js diff --git a/packages/rehype-mathjax/browser-renderer.js b/packages/rehype-mathjax/browser-renderer.js deleted file mode 100644 index 5acc291..0000000 --- a/packages/rehype-mathjax/browser-renderer.js +++ /dev/null @@ -1,62 +0,0 @@ -const fromDom = require('hast-util-from-dom') -const {mathjax} = require('mathjax-full/js/mathjax') -const {TeX} = require('mathjax-full/js/input/tex') -const {SVG} = require('mathjax-full/js/output/svg') -const {CHTML} = require('mathjax-full/js/output/chtml') -const {browserAdaptor} = require('mathjax-full/js/adaptors/browserAdaptor') -const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html') -const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages') - -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)) - } -} - -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 - }) - } -} - -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 - }) - } -} - -exports.SVGRenderer = SVGRenderer -exports.CHTMLRenderer = CHTMLRenderer diff --git a/packages/rehype-mathjax/chtml.js b/packages/rehype-mathjax/chtml.js new file mode 100644 index 0000000..476bc0c --- /dev/null +++ b/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 + } + } +} diff --git a/packages/rehype-mathjax/index.js b/packages/rehype-mathjax/index.js index 6a91851..c5fee8a 100644 --- a/packages/rehype-mathjax/index.js +++ b/packages/rehype-mathjax/index.js @@ -1,46 +1,2 @@ -const visit = require('unist-util-visit') -const toText = require('hast-util-to-text') -const {SVGRenderer, CHTMLRenderer} = require('./renderer') - -module.exports = rehypeMathJax - -function rehypeMathJax(output, options = {}) { - return transformMath - - function transformMath(tree) { - let renderer - switch (output) { - case 'chtml': - renderer = new CHTMLRenderer(options) - break - case 'svg': - renderer = new SVGRenderer(options) - break - default: - throw new Error(`'${output}' is neither 'chtml' nor 'svg'`) - } - - 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 - } - } -} +exports.rehypeMathJaxCHTML = require('./chtml') +exports.rehypeMathJaxSVG = require('./svg') diff --git a/packages/rehype-mathjax/package.json b/packages/rehype-mathjax/package.json index 83caf68..1e1b3d6 100644 --- a/packages/rehype-mathjax/package.json +++ b/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 (https://docs.casa)", "files": [ diff --git a/packages/rehype-mathjax/readme.md b/packages/rehype-mathjax/readme.md index 276d151..51c338e 100644 --- a/packages/rehype-mathjax/readme.md +++ b/packages/rehype-mathjax/readme.md @@ -24,10 +24,12 @@ npm install rehype-mathjax ### API ```js -unified().use(rehypeMathjax, output, options) +const rehypeMathJaxCHTML = require('rehype-mathjax/chtml') // Import CommonHTML ouput processor +// const rehypeMathJaxSVG = require('rehype-mathjax/svg') // Import SVG output processor +// const {rehypeMathJaxCHTML, rehypeMathJaxSVG} = require('rehype-mathjax') // Import both processors +unified().use(rehypeMathjaxCHMTL, options) ``` -* `ouput`: Which output format does plugin use, `'chtml'` or `'svg'` * `options`: MathJax ouput options for [CommonHTML ouput processor](http://docs.mathjax.org/en/latest/options/output/chtml.html) and [SVG ouput processor](http://docs.mathjax.org/en/latest/options/output/svg.html) @@ -52,7 +54,7 @@ And our script, `example.js`, looks as follows: ```js unified() .use(parse, {fragment: true}) - .use(mathjax, 'chtml', {fontURL: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.5/es5/output/chtml/fonts/woff-v2/'}) + .use(rehypeMathJaxCHTML, {fontURL: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.5/es5/output/chtml/fonts/woff-v2/'}) .use(stringify) .process(vfile.readSync('example.html'), function (err, file) { if (err) throw err diff --git a/packages/rehype-mathjax/renderer.js b/packages/rehype-mathjax/renderer.js deleted file mode 100644 index 7976a25..0000000 --- a/packages/rehype-mathjax/renderer.js +++ /dev/null @@ -1,63 +0,0 @@ -const fromDom = require('hast-util-from-dom') -const {JSDOM} = require('jsdom') -const {mathjax} = require('mathjax-full/js/mathjax') -const {TeX} = require('mathjax-full/js/input/tex') -const {SVG} = require('mathjax-full/js/output/svg') -const {CHTML} = require('mathjax-full/js/output/chtml') -const {jsdomAdaptor} = require('mathjax-full/js/adaptors/jsdomAdaptor') -const {RegisterHTMLHandler} = require('mathjax-full/js/handlers/html') -const {AllPackages} = require('mathjax-full/js/input/tex/AllPackages') - -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)) - } -} - -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 - }) - } -} - -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 - }) - } -} - -exports.SVGRenderer = SVGRenderer -exports.CHTMLRenderer = CHTMLRenderer diff --git a/packages/rehype-mathjax/renderer/browser.js b/packages/rehype-mathjax/renderer/browser.js new file mode 100644 index 0000000..183c538 --- /dev/null +++ b/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 diff --git a/packages/rehype-mathjax/renderer/chtml.js b/packages/rehype-mathjax/renderer/chtml.js new file mode 100644 index 0000000..0c12a45 --- /dev/null +++ b/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 diff --git a/packages/rehype-mathjax/renderer/node.js b/packages/rehype-mathjax/renderer/node.js new file mode 100644 index 0000000..1a3c13c --- /dev/null +++ b/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 diff --git a/packages/rehype-mathjax/renderer/svg.js b/packages/rehype-mathjax/renderer/svg.js new file mode 100644 index 0000000..883134e --- /dev/null +++ b/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 diff --git a/packages/rehype-mathjax/svg.js b/packages/rehype-mathjax/svg.js new file mode 100644 index 0000000..77e837a --- /dev/null +++ b/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 + } + } +} diff --git a/packages/rehype-mathjax/test.js b/packages/rehype-mathjax/test.js index 989aa9f..55a711a 100644 --- a/packages/rehype-mathjax/test.js +++ b/packages/rehype-mathjax/test.js @@ -1,32 +1,19 @@ const test = require('tape') -const {SVGRenderer, CHTMLRenderer} = require('./renderer') +const CHTMLRenderer = require('./renderer/chtml') +const SVGRenderer = require('./renderer/svg') const unified = require('unified') const parseMarkdown = require('remark-parse') const remark2rehype = require('remark-rehype') const parseHtml = require('rehype-parse') const stringify = require('rehype-stringify') const math = require('../remark-math') -const rehypeMathjax = require('.') const toHtml = require('hast-util-to-html') test('rehype-mathjax', function (t) { - t.throws( - () => { - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax, '', {}) - .use(stringify) - .processSync('') - .toString() - }, - "'' is neither 'chtml' nor 'svg'", - "'' is neither 'chtml' nor 'svg'" - ) - - for (const output of ['chtml', 'svg']) { + for (const output of ['./chtml', './svg']) { let renderer let options - if (output === 'chtml') { + if (output === './chtml') { options = {} renderer = new CHTMLRenderer(options) } else { @@ -37,7 +24,7 @@ test('rehype-mathjax', function (t) { t.deepEqual( unified() .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax, output, options) + .use(require(output), options) .use(stringify) .processSync( [ @@ -71,7 +58,7 @@ test('rehype-mathjax', function (t) { .use(parseMarkdown, {position: false}) .use(math) .use(remark2rehype) - .use(rehypeMathjax, output, options) + .use(require(output), options) .use(stringify) .processSync( [ @@ -107,7 +94,7 @@ test('rehype-mathjax', function (t) { t.deepEqual( unified() .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax, output, options) + .use(require(output), options) .use(stringify) .processSync( '

Double math \\alpha.

' @@ -129,7 +116,7 @@ test('rehype-mathjax', function (t) { t.deepEqual( unified() .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax, output, options) + .use(require(output), options) .use(stringify) .processSync('

No math

') .toString(), @@ -140,28 +127,21 @@ test('rehype-mathjax', function (t) { .toString(), `Should not be insert stylesheet if it is no math with ${output}` ) + t.deepEqual( + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(require(output)) + .use(stringify) + .processSync('') + .toString(), + unified() + .use(parseHtml, {fragment: true, position: false}) + .use(stringify) + .processSync('') + .toString(), + `Default options is \`{}\`` + ) } - const renderer = new CHTMLRenderer() - t.deepEqual( - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(rehypeMathjax, 'chtml') - .use(stringify) - .processSync('x') - .toString(), - unified() - .use(parseHtml, {fragment: true, position: false}) - .use(stringify) - .processSync( - '' + - toHtml(renderer.render('x', {display: false})) + - '' + - toHtml(renderer.styleSheet) - ) - .toString(), - `Default options is \`{}\`` - ) - t.end() }) From 4dfab934d9e914b209a15ac4cd6dd1cb4acb6696 Mon Sep 17 00:00:00 2001 From: TANIGUCHI Masaya Date: Wed, 22 Apr 2020 00:22:16 +0900 Subject: [PATCH 5/7] Update readme.md --- packages/rehype-mathjax/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rehype-mathjax/readme.md b/packages/rehype-mathjax/readme.md index 51c338e..4a5dc48 100644 --- a/packages/rehype-mathjax/readme.md +++ b/packages/rehype-mathjax/readme.md @@ -27,7 +27,7 @@ npm install rehype-mathjax const rehypeMathJaxCHTML = require('rehype-mathjax/chtml') // Import CommonHTML ouput processor // const rehypeMathJaxSVG = require('rehype-mathjax/svg') // Import SVG output processor // const {rehypeMathJaxCHTML, rehypeMathJaxSVG} = require('rehype-mathjax') // Import both processors -unified().use(rehypeMathjaxCHMTL, options) +unified().use(rehypeMathJaxCHMTL, options) ``` * `options`: MathJax ouput options for From 051fd7e05f1b2db531e745859d0e39cc3dd17ce4 Mon Sep 17 00:00:00 2001 From: TANIGUCHI MASAYA Date: Thu, 23 Apr 2020 17:07:42 +0900 Subject: [PATCH 6/7] Rename symbols --- packages/rehype-mathjax/chtml.js | 8 ++++---- packages/rehype-mathjax/index.js | 4 ++-- packages/rehype-mathjax/readme.md | 12 ++++++------ packages/rehype-mathjax/renderer/chtml.js | 4 ++-- packages/rehype-mathjax/renderer/svg.js | 4 ++-- packages/rehype-mathjax/svg.js | 4 ++-- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/rehype-mathjax/chtml.js b/packages/rehype-mathjax/chtml.js index 476bc0c..161a8c4 100644 --- a/packages/rehype-mathjax/chtml.js +++ b/packages/rehype-mathjax/chtml.js @@ -1,14 +1,14 @@ const visit = require('unist-util-visit') const toText = require('hast-util-to-text') -const CHTMLRenderer = require('./renderer/chtml') +const ChtmlRenderer = require('./renderer/chtml') -module.exports = rehypeMathJaxCHTML +module.exports = rehypeMathJaxChtml -function rehypeMathJaxCHTML(options = {}) { +function rehypeMathJaxChtml(options = {}) { return transformMath function transformMath(tree) { - const renderer = new CHTMLRenderer(options) + const renderer = new ChtmlRenderer(options) let found = false diff --git a/packages/rehype-mathjax/index.js b/packages/rehype-mathjax/index.js index c5fee8a..ae76a44 100644 --- a/packages/rehype-mathjax/index.js +++ b/packages/rehype-mathjax/index.js @@ -1,2 +1,2 @@ -exports.rehypeMathJaxCHTML = require('./chtml') -exports.rehypeMathJaxSVG = require('./svg') +exports.rehypeMathJaxChtml = require('./chtml') +exports.rehypeMathJaxSvg = require('./svg') diff --git a/packages/rehype-mathjax/readme.md b/packages/rehype-mathjax/readme.md index 51c338e..0d398a2 100644 --- a/packages/rehype-mathjax/readme.md +++ b/packages/rehype-mathjax/readme.md @@ -24,13 +24,13 @@ npm install rehype-mathjax ### API ```js -const rehypeMathJaxCHTML = require('rehype-mathjax/chtml') // Import CommonHTML ouput processor -// const rehypeMathJaxSVG = require('rehype-mathjax/svg') // Import SVG output processor -// const {rehypeMathJaxCHTML, rehypeMathJaxSVG} = require('rehype-mathjax') // Import both processors -unified().use(rehypeMathjaxCHMTL, options) +const rehypeMathJaxChtml = require('rehype-mathjax/chtml') // Import CommonHTML ouput processor +// const rehypeMathJaxSvg = require('rehype-mathjax/svg') // Import SVG output processor +// const {rehypeMathJaxChtml, rehypeMathJaxSvg} = require('rehype-mathjax') // Import both processors +unified().use(rehypeMathJaxChtml, options) ``` -* `options`: MathJax ouput options for +* `options`: MathJax ouput options for [CommonHTML ouput processor](http://docs.mathjax.org/en/latest/options/output/chtml.html) and [SVG ouput processor](http://docs.mathjax.org/en/latest/options/output/svg.html) @@ -54,7 +54,7 @@ And our script, `example.js`, looks as follows: ```js unified() .use(parse, {fragment: true}) - .use(rehypeMathJaxCHTML, {fontURL: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.5/es5/output/chtml/fonts/woff-v2/'}) + .use(rehypeMathJaxChtml, {fontURL: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.5/es5/output/chtml/fonts/woff-v2/'}) .use(stringify) .process(vfile.readSync('example.html'), function (err, file) { if (err) throw err diff --git a/packages/rehype-mathjax/renderer/chtml.js b/packages/rehype-mathjax/renderer/chtml.js index 0c12a45..414d554 100644 --- a/packages/rehype-mathjax/renderer/chtml.js +++ b/packages/rehype-mathjax/renderer/chtml.js @@ -4,7 +4,7 @@ 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 { +class ChtmlRenderer extends AbstractRenderer { constructor(options) { super() this.InputJax = new TeX({packages: AllPackages}) @@ -16,4 +16,4 @@ class CHTMLRenderer extends AbstractRenderer { } } -module.exports = CHTMLRenderer +module.exports = ChtmlRenderer diff --git a/packages/rehype-mathjax/renderer/svg.js b/packages/rehype-mathjax/renderer/svg.js index 883134e..f2d6df6 100644 --- a/packages/rehype-mathjax/renderer/svg.js +++ b/packages/rehype-mathjax/renderer/svg.js @@ -4,7 +4,7 @@ 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 { +class SvgRenderer extends AbstractRenderer { constructor(options) { super() this.InputJax = new TeX({packages: AllPackages}) @@ -16,4 +16,4 @@ class SVGRenderer extends AbstractRenderer { } } -module.exports = SVGRenderer +module.exports = SvgRenderer diff --git a/packages/rehype-mathjax/svg.js b/packages/rehype-mathjax/svg.js index 77e837a..231d983 100644 --- a/packages/rehype-mathjax/svg.js +++ b/packages/rehype-mathjax/svg.js @@ -1,6 +1,6 @@ const visit = require('unist-util-visit') const toText = require('hast-util-to-text') -const SVGRenderer = require('./renderer/svg') +const SvgRenderer = require('./renderer/svg') module.exports = rehypeMathJaxSVG @@ -8,7 +8,7 @@ function rehypeMathJaxSVG(options = {}) { return transformMath function transformMath(tree) { - const renderer = new SVGRenderer(options) + const renderer = new SvgRenderer(options) let found = false From b5a532c693695a6ebf7d1b07ff0c36c1def75ef9 Mon Sep 17 00:00:00 2001 From: Fernando Garcia Borges Date: Fri, 24 Apr 2020 14:59:38 +0900 Subject: [PATCH 7/7] Use SVG output processor as default --- packages/rehype-mathjax/index.js | 3 +- packages/rehype-mathjax/readme.md | 697 +++--------------------------- 2 files changed, 71 insertions(+), 629 deletions(-) diff --git a/packages/rehype-mathjax/index.js b/packages/rehype-mathjax/index.js index ae76a44..98aecf8 100644 --- a/packages/rehype-mathjax/index.js +++ b/packages/rehype-mathjax/index.js @@ -1,2 +1 @@ -exports.rehypeMathJaxChtml = require('./chtml') -exports.rehypeMathJaxSvg = require('./svg') +module.exports = require('./svg') diff --git a/packages/rehype-mathjax/readme.md b/packages/rehype-mathjax/readme.md index 0d398a2..fbc3ea1 100644 --- a/packages/rehype-mathjax/readme.md +++ b/packages/rehype-mathjax/readme.md @@ -24,10 +24,10 @@ npm install rehype-mathjax ### API ```js -const rehypeMathJaxChtml = require('rehype-mathjax/chtml') // Import CommonHTML ouput processor +// const rehypeMathJaxChtml = require('rehype-mathjax/chtml') // Import CommonHTML ouput processor // const rehypeMathJaxSvg = require('rehype-mathjax/svg') // Import SVG output processor -// const {rehypeMathJaxChtml, rehypeMathJaxSvg} = require('rehype-mathjax') // Import both processors -unified().use(rehypeMathJaxChtml, options) +const rehypeMathJax = require('rehype-mathjax') // Import default output processor as SVG output processor +unified().use(rehypeMathJax, options) ``` * `options`: MathJax ouput options for @@ -54,7 +54,7 @@ And our script, `example.js`, looks as follows: ```js unified() .use(parse, {fragment: true}) - .use(rehypeMathJaxChtml, {fontURL: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.5/es5/output/chtml/fonts/woff-v2/'}) + .use(rehypeMathJax) .use(stringify) .process(vfile.readSync('example.html'), function (err, file) { if (err) throw err @@ -66,681 +66,124 @@ Now, running `node example` yields: ```html

- Lift() can be determined by Lift Coefficient - () like the following equation. + Lift() can be determined by Lift Coefficient + () like the following equation.

-
- +
```