In HyperMD, Use MathJax to render TeX formulars.
In HyperMD, Use MathJax to render TeX formulars.
Demo | GitHub |
⚠️ 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…
mathjax
and hypermd-mathjax
import
before creating HyperMD editorAfter 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)
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.
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/mathjax@2.7.5/MathJax.js'></script>
<script src="https://cdn.jsdelivr.net/npm/hypermd-mathjax/index.js"></script>
pbe.manifest.json
and define modules’ global var namenpm run dev