|
| 1 | +<h1><a href="https://katex.org/"> |
| 2 | + <picture> |
| 3 | + <source media="(prefers-color-scheme: dark)" srcset="https://katex.org/img/katex-logo.svg"> |
| 4 | + <img alt="KaTeX" width=130 src="https://katex.org/img/katex-logo-black.svg"> |
| 5 | + </picture> |
| 6 | +</a></h1> |
| 7 | + |
| 8 | +[](https://www.npmjs.com/package/katex) |
| 9 | +[](https://github.com/semantic-release/semantic-release) |
| 10 | +[](https://github.com/KaTeX/KaTeX/actions?query=workflow%3ACI) |
| 11 | +[](https://codecov.io/gh/KaTeX/KaTeX) |
| 12 | +[](https://github.com/KaTeX/KaTeX/discussions) |
| 13 | +[](https://www.jsdelivr.com/package/npm/katex) |
| 14 | + |
| 15 | +[](https://gitpod.io/#https://github.com/KaTeX/KaTeX) |
| 16 | +[](https://opencollective.com/katex) |
| 17 | + |
| 18 | +KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web. |
| 19 | + |
| 20 | + * **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](https://www.intmath.com/cg5/katex-mathjax-comparison.php). |
| 21 | + * **Print quality:** KaTeX's layout is based on Donald Knuth's TeX, the gold standard for math typesetting. |
| 22 | + * **Self contained:** KaTeX has no dependencies and can easily be bundled with your website resources. |
| 23 | + * **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. |
| 24 | + |
| 25 | +KaTeX is compatible with all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 11. |
| 26 | + |
| 27 | +KaTeX supports much (but not all) of LaTeX and many LaTeX packages. See the [list of supported functions](https://katex.org/docs/supported.html). |
| 28 | + |
| 29 | +Try out KaTeX [on the demo page](https://katex.org/#demo)! |
| 30 | + |
| 31 | +## Getting started |
| 32 | + |
| 33 | +### Starter template |
| 34 | + |
| 35 | +```html |
| 36 | +<!DOCTYPE html> |
| 37 | +<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly --> |
| 38 | +<html> |
| 39 | + <head> |
| 40 | + < link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity= "sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin= "anonymous"> |
| 41 | + |
| 42 | + <!-- The loading of KaTeX is deferred to speed up page rendering --> |
| 43 | + < script defer src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity= "sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin= "anonymous"></ script> |
| 44 | + |
| 45 | + <!-- To automatically render math in text elements, include the auto-render extension: --> |
| 46 | + < script defer src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity= "sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin= "anonymous" |
| 47 | + onload="renderMathInElement(document.body);"></script> |
| 48 | + </head> |
| 49 | + ... |
| 50 | +</html> |
| 51 | +``` |
| 52 | + |
| 53 | +You can also [download KaTeX](https://github.com/KaTeX/KaTeX/releases) and host it yourself. |
| 54 | + |
| 55 | +For details on how to configure auto-render extension, refer to [the documentation](https://katex.org/docs/autorender.html). |
| 56 | + |
| 57 | +### API |
| 58 | + |
| 59 | +Call `katex.render` to render a TeX expression directly into a DOM element. |
| 60 | +For example: |
| 61 | + |
| 62 | +```js |
| 63 | +katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, { |
| 64 | + throwOnError: false |
| 65 | +}); |
| 66 | +``` |
| 67 | + |
| 68 | +Call `katex.renderToString` to generate an HTML string of the rendered math, |
| 69 | +e.g., for server-side rendering. For example: |
| 70 | + |
| 71 | +```js |
| 72 | +var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", { |
| 73 | + throwOnError: false |
| 74 | +}); |
| 75 | +// '<span class="katex">...</span>' |
| 76 | +``` |
| 77 | + |
| 78 | +Make sure to include the CSS and font files in both cases. |
| 79 | +If you are doing all rendering on the server, there is no need to include the |
| 80 | +JavaScript on the client. |
| 81 | + |
| 82 | +The examples above use the `throwOnError: false` option, which renders invalid |
| 83 | +inputs as the TeX source code in red (by default), with the error message as |
| 84 | +hover text. For other available options, see the |
| 85 | +[API documentation](https://katex.org/docs/api.html), |
| 86 | +[options documentation](https://katex.org/docs/options.html), and |
| 87 | +[handling errors documentation](https://katex.org/docs/error.html). |
| 88 | + |
| 89 | +## Demo and Documentation |
| 90 | + |
| 91 | +Learn more about using KaTeX [on the website](https://katex.org)! |
| 92 | + |
| 93 | +## Contributors |
| 94 | + |
| 95 | +### Code Contributors |
| 96 | + |
| 97 | +This project exists thanks to all the people who contribute code. If you'd like to help, see [our guide to contributing code](CONTRIBUTING.md). |
| 98 | +<a href="https://github.com/KaTeX/KaTeX/graphs/contributors"><img src="https://contributors-svg.opencollective.com/katex/contributors.svg?width=890&button=false" alt="Code contributors" /></a> |
| 99 | + |
| 100 | +### Financial Contributors |
| 101 | + |
| 102 | +Become a financial contributor and help us sustain our community. |
| 103 | + |
| 104 | +#### Individuals |
| 105 | + |
| 106 | +<a href="https://opencollective.com/katex"><img src="https://opencollective.com/katex/individuals.svg?width=890" alt="Contribute on Open Collective"></a> |
| 107 | + |
| 108 | +#### Organizations |
| 109 | + |
| 110 | +Support this project with your organization. Your logo will show up here with a link to your website. |
| 111 | + |
| 112 | +<a href="https://opencollective.com/katex/organization/0/website"><img src="https://opencollective.com/katex/organization/0/avatar.svg" alt="Organization 1"></a> |
| 113 | +<a href="https://opencollective.com/katex/organization/1/website"><img src="https://opencollective.com/katex/organization/1/avatar.svg" alt="Organization 2"></a> |
| 114 | +<a href="https://opencollective.com/katex/organization/2/website"><img src="https://opencollective.com/katex/organization/2/avatar.svg" alt="Organization 3"></a> |
| 115 | +<a href="https://opencollective.com/katex/organization/3/website"><img src="https://opencollective.com/katex/organization/3/avatar.svg" alt="Organization 4"></a> |
| 116 | +<a href="https://opencollective.com/katex/organization/4/website"><img src="https://opencollective.com/katex/organization/4/avatar.svg" alt="Organization 5"></a> |
| 117 | +<a href="https://opencollective.com/katex/organization/5/website"><img src="https://opencollective.com/katex/organization/5/avatar.svg" alt="Organization 6"></a> |
| 118 | +<a href="https://opencollective.com/katex/organization/6/website"><img src="https://opencollective.com/katex/organization/6/avatar.svg" alt="Organization 7"></a> |
| 119 | +<a href="https://opencollective.com/katex/organization/7/website"><img src="https://opencollective.com/katex/organization/7/avatar.svg" alt="Organization 8"></a> |
| 120 | +<a href="https://opencollective.com/katex/organization/8/website"><img src="https://opencollective.com/katex/organization/8/avatar.svg" alt="Organization 9"></a> |
| 121 | +<a href="https://opencollective.com/katex/organization/9/website"><img src="https://opencollective.com/katex/organization/9/avatar.svg" alt="Organization 10"></a> |
| 122 | + |
| 123 | +## License |
| 124 | + |
| 125 | +KaTeX is licensed under the [MIT License](https://opensource.org/licenses/MIT). |
0 commit comments