You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
4.4 KiB
92 lines
4.4 KiB
4 years ago
|
# [<img src="https://katex.org/img/katex-logo-black.svg" width="130" alt="KaTeX">](https://katex.org/)
|
||
|
|
[](https://www.npmjs.com/package/katex)
|
||
|
|
[](https://circleci.com/gh/KaTeX/KaTeX)
|
||
|
|
[](https://codecov.io/gh/KaTeX/KaTeX)
|
||
|
|
[](https://gitter.im/KaTeX/KaTeX?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
||
|
|
[](https://dependabot.com)
|
||
|
|
[](https://www.jsdelivr.com/package/npm/katex)
|
||
|
|
|
||
|
|
|
||
|
|
KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
|
||
|
|
|
||
|
|
* **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://www.intmath.com/cg5/katex-mathjax-comparison.php).
|
||
|
|
* **Print quality:** KaTeX's layout is based on Donald Knuth's TeX, the gold standard for math typesetting.
|
||
|
|
* **Self contained:** KaTeX has no dependencies and can easily be bundled with your website resources.
|
||
|
|
* **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.
|
||
|
|
|
||
|
|
KaTeX is compatible with all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 9–11.
|
||
|
|
|
||
|
|
KaTeX supports much (but not all) of LaTeX and many LaTeX packages. See the [list of supported functions](https://katex.org/docs/supported.html).
|
||
|
|
|
||
|
|
Try out KaTeX [on the demo page](https://katex.org/#demo)!
|
||
|
|
|
||
|
|
## Getting started
|
||
|
|
|
||
|
|
### Starter template
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
|
||
|
|
|
||
|
|
<!-- The loading of KaTeX is deferred to speed up page rendering -->
|
||
|
|
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<!-- To automatically render math in text elements, include the auto-render extension: -->
|
||
|
|
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
|
||
|
|
onload="renderMathInElement(document.body);"></script>
|
||
|
|
</head>
|
||
|
|
...
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
|
||
|
|
You can also [download KaTeX](https://github.com/KaTeX/KaTeX/releases) and host it yourself.
|
||
|
|
|
||
|
|
For details on how to configure auto-render extension, refer to [the documentation](https://katex.org/docs/autorender.html).
|
||
|
|
|
||
|
|
### API
|
||
|
|
|
||
|
|
Call `katex.render` to render a TeX expression directly into a DOM element.
|
||
|
|
For example:
|
||
|
|
|
||
|
|
```js
|
||
|
|
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, {
|
||
|
|
throwOnError: false
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Call `katex.renderToString` to generate an HTML string of the rendered math,
|
||
|
|
e.g., for server-side rendering. For example:
|
||
|
|
|
||
|
|
```js
|
||
|
|
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
|
||
|
|
throwOnError: false
|
||
|
|
});
|
||
|
|
// '<span class="katex">...</span>'
|
||
|
|
```
|
||
|
|
|
||
|
|
Make sure to include the CSS and font files in both cases.
|
||
|
|
If you are doing all rendering on the server, there is no need to include the
|
||
|
|
JavaScript on the client.
|
||
|
|
|
||
|
|
The examples above use the `throwOnError: false` option, which renders invalid
|
||
|
|
inputs as the TeX source code in red (by default), with the error message as
|
||
|
|
hover text. For other available options, see the
|
||
|
|
[API documentation](https://katex.org/docs/api.html),
|
||
|
|
[options documentation](https://katex.org/docs/options.html), and
|
||
|
|
[handling errors documentation](https://katex.org/docs/error.html).
|
||
|
|
|
||
|
|
## Demo and Documentation
|
||
|
|
|
||
|
|
Learn more about using KaTeX [on the website](https://katex.org)!
|
||
|
|
|
||
|
|
## Contributing
|
||
|
|
|
||
|
|
See [CONTRIBUTING.md](CONTRIBUTING.md)
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
KaTeX is licensed under the [MIT License](http://opensource.org/licenses/MIT).
|