📜 ⬆️ ⬇️

Khan Academy has developed a quick javascript library for working with mathematical formulas.

The de facto standard for working with mathematical formulas on the web, written in the TeX format, is the MathJax library. The Khan Academy online learning platform has a variety of mathematics courses in its arsenal. One of the important points of the Academy’s mission is to make quality education accessible to everyone, regardless of geographic or material situation, therefore, for the Khan Academy, the site’s very fast operation on weak old computers and mobile devices. That is why the academy developers decided to write their own library for rendering TeX in HTML, which in the future could completely replace MathJax and would work much faster.

The KaTeX library is still quite young (the current version is 0.1.0) and still cannot compare with MathJax in functionality. The current list of supported features is available on the project wiki. KaTeX supports fewer output formats than MathJax, which can render formulas in HTML + CSS, SVG and MathML. HTML output is implemented in KaTech, support for MathML is planned in the future. KaTeX does not support older (older than 8.0) versions of IE.



The key advantage of KaTeX is speed. According to test results, KaTeX is ahead of MathJax by 10-50 times. This acceleration was achieved mainly due to the fact that the rendering widely uses the capabilities of modern CSS, whereas MathJax calculates the positions of most characters "manually" using JavaScript. This is a trade-off, because in different browsers the KaTeX formulas may sometimes not look exactly the same, however, taking into account the multiple gains in speed, the trade-off is quite reasonable - now browsers maintain standards much better than 10 years ago when MathJax began development.
')
Connecting and using the library is very simple. The katex.min.js and katex.min.css files should be included in the page code:

 <link rel="stylesheet" type="text/css" href="/path/to/katex.min.css"> <script src="/path/to/katex.min.js" type="text/javascript"></script> 

In addition, it is worth remembering that KaTeX uses a lot of special fonts to display mathematical symbols. Actually, as with MathJax, it is the font files that make up the lion's share of the volume.

To render the form, use the katex.render function, which takes a string in the TeX format and a reference to the DOM element in which the formula will be displayed:

 katex.render("c = \\pm\\sqrt{a^2 + b^2}", element); 

For server-side HTML rendering, you can use the output in the string:

 var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}"); 

The KaTeX library is distributed under the MIT license.

Source: https://habr.com/ru/post/237265/


All Articles