KaTeX only accepts LaTeX input <\/h2>\n
While KaTeX is a lot faster than MathJax, for me there are 2 downsides with KaTeX:<\/p>\n
- \n
- KaTeX only accepts LaTeX input. However, I have used ASCIIMathML<\/a> for all the equations and formulas on IntMath, because it is signiicantly simpler and easier to use than LaTeX. If I wanted to use KaTeX for my site, I'm stuck. <\/li>\n
- KaTeX doesn't recognize many math expressions yet, for example matrices, determinants, various symbols, "aligned" environments (where you can align everything on the equal sign), various accents, case definitions and so on. <\/li>\n<\/ol>\n
So I set about writing a page that handles both of these issues. <\/p>\n
ASCIIMathML input, fallback to MathJax <\/h2>\n
I needed a system that recognised ASCIIMathML input, converted it to LaTeX, and then was processed by KaTeX so it looked like "real" math. In the cases where KaTeX cannot handle the math, it needs to fall back to MathJax so all the math is rendered properly. <\/p>\n
Here is a demo of my solution: <\/p>\n
\n
ASCIIMathML, KaTeX and MathJax Demo<\/a><\/p>\n<\/blockquote>\n
You'll see some equations appear quickly (those done by KaTeX), then the MathJax-rendered ones will appear. They have a green mark next to them so you can see what MathJax can do that KaTeX cannot. <\/p>\n
This is deliberately a \"heavy\" page (with many equations) to push its performance.<\/p>\n
How is it done?<\/h2>\n
Fortunately, ASCIIMathML comes with a script, ASCIIMathTeXImg.js, which converts the simple ASCIIMathML input to LaTeX, and then outputs each math expression as an image (using MimeTex or MathTex). <\/p>\n
I modified the function AMTparseMath() in ASCIIMathTeXImg.js, so it no longer converts math to images, but outputs LaTeX. <\/p>\n
My tweaks were:<\/p>\n
- \n
- Create a span in the place of each piece of ASCIIMathML<\/li>\n
- Give the span a unique id<\/li>\n
- Try first to render it with KaTeX<\/li>\n
- If that fails, put back the original ASCIIMathML and render it with MathJax<\/li>\n<\/ol>\n
Here's the relevant parts of the changed script.<\/p>\n
\r\nvar node = document.createElement(\"span\");\r\nthisId = \"mathId\"+counter;\r\nnode.id = thisId;\r\ntry {\r\n\tkatex.render(texstring,node);\r\n} catch(err) { \r\n\tnode.className = \"mj\";\r\n\tnode.innerHTML = \"`\"+str+\"`\";\r\n\tMathJax.Hub.Queue([\"Typeset\",MathJax.Hub,thisId]);\r\n}\r\ncounter++;\r\n<\/pre>\nDownsides to the approach <\/h2>\n
Of course, the main aim is speed, and if the user needs to download both KaTeX and MathJax, as well as ASCIIMathTeXImg.js, there is going to be a significant delay before any rendering occurs, especially on a mobile device. <\/p>\n
On my phone, the first KaTeX equations on the demo page<\/a> appeared in about 6 seconds, and the MathJax matrix came in around the 13 second mark. <\/p>\n
But it is a feasible solution for mobile devices, especially if your more complicated equations are low down the page (so they will process in the background and be done before the user gets to them). <\/p>\n
Another downside is that the user will need to download 2 sets of fonts - one for MathJax and one for KaTeX. One way out of that would be to specify one or the other.<\/p>\n
Related pages <\/h2>\n
You may also be interested in this demo, where you can see how much faster KaTeX does its thing compared to MathJax: <\/p>\n
\n
KaTeX and MathJax comparison demo<\/a> <\/p>\n<\/blockquote>\n
This page gives background on KaTeX:<\/p>\n
\n
KaTeX – a new way to display math on the Web<\/a><\/p>\n<\/blockquote>\n
This page is a sandbox where you can play with ASCIIMathML input:<\/p>\n
\n
ASCIIMathML input, MathJax output<\/a> <\/p>\n<\/blockquote>\n
This page uses the script mentioned above, ASCIIMathTeXImg.js, to send math in emails:<\/p>\n
\n
Send an email containing math<\/a><\/p>\n<\/blockquote>\n
And finally, this page gives examples of how to enter math using ASCIIMathML:<\/p>\n
\n
Syntax for entering math using ASCIIMathML<\/a><\/p>\n<\/blockquote>\n
Credits<\/h2>\n
Peter Jipsen and David Lippman for ASCIIMathML.<\/p>\n
The MathJax team (especially Davide and Peter) for MathJax. <\/p>\n
The Khan Academy team for KaTeX. <\/p>\n
Be the first to comment<\/a> below.<\/p>","protected":false},"excerpt":{"rendered":"
- KaTeX doesn't recognize many math expressions yet, for example matrices, determinants, various symbols, "aligned" environments (where you can align everything on the equal sign), various accents, case definitions and so on. <\/li>\n<\/ol>\n
![\"KaTEX](\"https:\/\/www.intmath.com\/blog\/wp-content\/images\/2014\/09\/asciimathml-katex-mathjax.png\")
<\/a>