# hypermd-mathjax

> In HyperMD, Use MathJax to render TeX formulars

Latest version **0.1.0** (published 2018-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install hypermd-mathjax
pnpm add hypermd-mathjax
yarn add hypermd-mathjax
bun add hypermd-mathjax
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-10-09 |
| First published | 2018-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | laobubu |
| Maintainers | laobubu |
| Keywords | hypermd, powerpack, mathjax |

## Links

- npm: https://www.npmjs.com/package/hypermd-mathjax
- Repository: https://github.com/HyperMD/hypermd-mathjax
- Homepage: https://github.com/HyperMD/hypermd-mathjax#readme
- Issues: https://github.com/HyperMD/hypermd-mathjax/issues
- npm.io page: https://npm.io/package/hypermd-mathjax

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2018-10-09

## README

# hypermd-mathjax

In HyperMD, Use [MathJax][] to render TeX formulars.

[Demo](https://hypermd.github.io/hypermd-mathjax/example/) | [GitHub](https://github.com/HyperMD/hypermd-mathjax) | [![NPM version](https://img.shields.io/npm/v/hypermd-mathjax.svg?style=flat-square)](https://npmjs.org/package/hypermd-mathjax)

## 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](http://docs.mathjax.org/en/latest/configuration.html). My personal favorite config is:

```html
<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`

```js
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:

```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](./example/requirejs-main.js).

### For Plain Browser Env

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

See the source of [example file](./example/pbe-index.html). Basically, all you need is adding few lines after CodeMirror and HyperMD, before creating your editor:

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

<script src='https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></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...


[MathJax]: https://www.mathjax.org/

---
_Source: https://npm.io/package/hypermd-mathjax · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._