neutrofoton

Science, Technology and Life

Math in Web

| Comments

There are several frameworks that can be used to display math equation on web page. Usually math equestion written in LaTeX format. LaTeX is used for the communication and publication of scientific documents in many fields, including mathematics, physics, computer science, statistics etc.

MathJax and KaTeX are two popular javascript frameworks that can render LaTeX expression to beautiful math equation in browser.

The following are examples math LaTeX expression rendered with KaTeX. To use KaTeX we just need to include katex.min.css and katex.min.js

KaTeX
1
2
3
4
5
6
7
8
9
10
11
12
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>

<div>
<p><span class="katex" id="eq1"></span></p>
<p><span class="katex" id="eq2"></span></p>
<p><span class="katex" id="eq3"></span></p>
<p><span class="katex" id="eq4"></span></p>
<p><span class="katex" id="eq5"></span></p>
<p><span class="katex" id="eq6"></span></p>
<p><span class="katex" id="eq7"></span></p>
</div>
KaTeX sample
1
2
3
4
5
6
7
8
9
katex.render("c = \\pm\\sqrt{a^2 + b^2}", eq1);
katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", eq2);

katex.render("\\int u \\frac{dv}{dx}\\,dx=uv-\\int \\frac{du}{dx}v\\,dx", eq3);

katex.render("f(x) = \\int_{-\\infty}^\\infty \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}", eq4);
katex.render("\\oint \\vec{F} \\cdot d\\vec{s}=0", eq5);

katex.render("\\left( \\sum_{k=1}^n a_k b_k \\right)^2 \\leq \\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)", eq6);

The comparison between MathJax and KaTeX can be found here. At the time of writing this blog post, I got KaTeX is faster than MathJax. But KaTeX can not render a few expressions that MathJax can.

The comparison results could be changed in the next. Since both of them are actively developed.

Comments