hypermd-mathjax
v0.1.0
Published
In HyperMD, Use MathJax to render TeX formulars
Downloads
4
Readme
hypermd-mathjax
In HyperMD, Use MathJax to render TeX formulars.
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...
- install
mathjax
andhypermd-mathjax
import
before creating HyperMD editor- 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)
Install the packages: npm install --save hypermd-mathjax mathjax
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="./node_modules/requirejs/require.js"></script>
<script src="./node_modules/hypermd/goods/patch-requirejs.js"></script> <!-- 👈 IMPORTANT -->
<script data-main src="main.js"></script>
As for your main.js
, here is an example.
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?config=TeX-MML-AM_CHTML' async></script>
<script src="https://cdn.jsdelivr.net/npm/hypermd-mathjax/index.js"></script>
Develop
- (if needed) update
pbe.manifest.json
and define modules' global var name npm run dev
- Start test. You have to refresh the page manually...