hypermd-mathjax

In HyperMD, Use MathJax to render TeX formulars.

Demo | GitHub |

How to use

⚠️ First of all, add mathjax-config into your HTML, before your .js script tag.

More detail about the config can be found here. My personal favorite config is:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    jax: ["input/TeX", "output/HTML-CSS","output/NativeMML","output/SVG"],
    extensions: ["MathMenu.js","MathZoom.js", "AssistiveMML.js", "a11y/accessibility-menu.js"],
    TeX: {
        extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js"]
    }
});
</script>

Then...

1. install mathjax and hypermd-mathjax
2. import before creating HyperMD editor
3. create HyperMD editor

For webpack / parcel

After adding mathjax-config (see above) to HTML page, install the packages: npm install --save hypermd-mathjax mathjax

import * as HyperMD from "hypermd"
import "hypermd-mathjax"

const your_textarea = document.getElementById('input-box')
const editor = HyperMD.fromTextArea(your_textarea)

For requirejs (example)

In your HTML:

<textarea id="input-box" cols="30" rows="10">I'm using MathJax to render $f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz$</textarea>

<!-- **mathjax-config** HERE (see above)  -->

<script src="https://cdn.jsdelivr.net/npm/requirejs/require.js"></script> <!-- 👈 RequireJS -->
<script src="https://cdn.jsdelivr.net/npm/hypermd/goods/patch-requirejs.js"></script> <!-- 👈 IMPORTANT -->
<script data-main src="main.js"></script>

In your JavaScript, before defining your main entry, don't forget :

requirejs.config({
  packages: [
    { name: 'hypermd-mathjax', main: 'index.js' },
    { name: 'mathjax', main: 'MathJax.js' },
  ]
})

Finally, here is an example of main.js and a live demo.

For Plain Browser Env

Why hurting yourself? The bundlers and module loaders are the future!

See the source of example file. Basically, all you need is adding few lines after CodeMirror and HyperMD, before creating your editor:

<!-- **mathjax-config** HERE (see above)  -->

<script src='https://cdn.jsdelivr.net/npm/[email protected]/MathJax.js'></script>
<script src="https://cdn.jsdelivr.net/npm/hypermd-mathjax/index.js"></script>

Develop

0. (if needed) update pbe.manifest.json and define modules' global var name
1. npm run dev
2. Start test. You have to refresh the page manually...