15bd8deadSopenharmony_ci# [<img src="https://khan.github.io/KaTeX/katex-logo.svg" width="130" alt="KaTeX">](https://khan.github.io/KaTeX/) [](https://travis-ci.org/Khan/KaTeX) 25bd8deadSopenharmony_ci 35bd8deadSopenharmony_ci[](https://gitter.im/Khan/KaTeX?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 45bd8deadSopenharmony_ci 55bd8deadSopenharmony_ciKaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. 65bd8deadSopenharmony_ci 75bd8deadSopenharmony_ci * **Fast:** KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in [this speed test](http://jsperf.com/katex-vs-mathjax/). 85bd8deadSopenharmony_ci * **Print quality:** KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting. 95bd8deadSopenharmony_ci * **Self contained:** KaTeX has no dependencies and can easily be bundled with your website resources. 105bd8deadSopenharmony_ci * **Server side rendering:** KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML. 115bd8deadSopenharmony_ci 125bd8deadSopenharmony_ciKaTeX supports all major browsers, including Chrome, Safari, Firefox, Opera, and IE 8 - IE 11. A list of supported commands can be on the [wiki](https://github.com/Khan/KaTeX/wiki/Function-Support-in-KaTeX). 135bd8deadSopenharmony_ci 145bd8deadSopenharmony_ci## Usage 155bd8deadSopenharmony_ci 165bd8deadSopenharmony_ciYou can [download KaTeX](https://github.com/khan/katex/releases) and host it on your server or include the `katex.min.js` and `katex.min.css` files on your page directly from a CDN: 175bd8deadSopenharmony_ci 185bd8deadSopenharmony_ci```html 195bd8deadSopenharmony_ci<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css"> 205bd8deadSopenharmony_ci<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js"></script> 215bd8deadSopenharmony_ci``` 225bd8deadSopenharmony_ci 235bd8deadSopenharmony_ci#### In-browser rendering 245bd8deadSopenharmony_ci 255bd8deadSopenharmony_ciCall `katex.render` with a TeX expression and a DOM element to render into: 265bd8deadSopenharmony_ci 275bd8deadSopenharmony_ci```js 285bd8deadSopenharmony_cikatex.render("c = \\pm\\sqrt{a^2 + b^2}", element); 295bd8deadSopenharmony_ci``` 305bd8deadSopenharmony_ci 315bd8deadSopenharmony_ciIf KaTeX can't parse the expression, it throws a `katex.ParseError` error. 325bd8deadSopenharmony_ci 335bd8deadSopenharmony_ci#### Server side rendering or rendering to a string 345bd8deadSopenharmony_ci 355bd8deadSopenharmony_ciTo generate HTML on the server or to generate an HTML string of the rendered math, you can use `katex.renderToString`: 365bd8deadSopenharmony_ci 375bd8deadSopenharmony_ci```js 385bd8deadSopenharmony_civar html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}"); 395bd8deadSopenharmony_ci// '<span class="katex">...</span>' 405bd8deadSopenharmony_ci``` 415bd8deadSopenharmony_ci 425bd8deadSopenharmony_ciMake sure to include the CSS and font files, but there is no need to include the JavaScript. Like `render`, `renderToString` throws if it can't parse the expression. 435bd8deadSopenharmony_ci 445bd8deadSopenharmony_ci#### Rendering options 455bd8deadSopenharmony_ci 465bd8deadSopenharmony_ciYou can provide an object of options as the last argument to `katex.render` and `katex.renderToString`. Available options are: 475bd8deadSopenharmony_ci 485bd8deadSopenharmony_ci- `displayMode`: `boolean`. If `true` the math will be rendered in display mode, which will put the math in display style (so `\int` and `\sum` are large, for example), and will center the math on the page on its own line. If `false` the math will be rendered in inline mode. (default: `false`) 495bd8deadSopenharmony_ci- `throwOnError`: `boolean`. If `true`, KaTeX will throw a `ParseError` when it encounters an unsupported command. If `false`, KaTeX will render the unsupported command as text in the color given by `errorColor`. (default: `true`) 505bd8deadSopenharmony_ci- `errorColor`: `string`. A color string given in the format `"#XXX"` or `"#XXXXXX"`. This option determines the color which unsupported commands are rendered in. (default: `#cc0000`) 515bd8deadSopenharmony_ci 525bd8deadSopenharmony_ciFor example: 535bd8deadSopenharmony_ci 545bd8deadSopenharmony_ci```js 555bd8deadSopenharmony_cikatex.render("c = \\pm\\sqrt{a^2 + b^2}", element, { displayMode: true }); 565bd8deadSopenharmony_ci``` 575bd8deadSopenharmony_ci 585bd8deadSopenharmony_ci#### Automatic rendering of math on a page 595bd8deadSopenharmony_ci 605bd8deadSopenharmony_ciMath on the page can be automatically rendered using the auto-render extension. See [the Auto-render README](contrib/auto-render/README.md) for more information. 615bd8deadSopenharmony_ci 625bd8deadSopenharmony_ci## Contributing 635bd8deadSopenharmony_ci 645bd8deadSopenharmony_ciSee [CONTRIBUTING.md](CONTRIBUTING.md) 655bd8deadSopenharmony_ci 665bd8deadSopenharmony_ci## License 675bd8deadSopenharmony_ci 685bd8deadSopenharmony_ciKaTeX is licensed under the [MIT License](http://opensource.org/licenses/MIT). 69