Well, I was late to discover Katex. It's really cool and faster in rendering Math in Web. Just downloaded the Katex Release, and got it working. Sample code below:
<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
<head>
<!--
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
<head>
<!--
<link href="fonts/KaTeX_Main-Regular.woff2" as="font" type="font/woff2">
<link href="fonts/KaTeX_Math-Italic.woff2" as="font" type="font/woff2">
<link href="fonts/KaTeX_Size2-Regular.woff2" as="font" type="font/woff2">
<link href="fonts/KaTeX_Size4-Regular.woff2" as="font" type="font/woff2">
<link href="fonts/KaTeX_Math-Italic.woff2" as="font" type="font/woff2">
<link href="fonts/KaTeX_Size2-Regular.woff2" as="font" type="font/woff2">
<link href="fonts/KaTeX_Size4-Regular.woff2" as="font" type="font/woff2">
-->
<link rel="stylesheet" type="text/css" href="katex.min.css">
<script src="katex.min.js"></script>
<script src="contrib/mhchem.min.js"></script>
<script src="contrib/copy-tex.min.js"></script>
<script src="contrib/auto-render.min.js"></script>
<script>
function ready() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false}
]
});
}
</script>
</head>
<body onload="ready()">
<div>The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$ will be rendered as a block element.</div>
<br>
<div>The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\] will be rendered as a block element.</div>
</body>
</html>
<link rel="stylesheet" type="text/css" href="katex.min.css">
<script src="katex.min.js"></script>
<script src="contrib/mhchem.min.js"></script>
<script src="contrib/copy-tex.min.js"></script>
<script src="contrib/auto-render.min.js"></script>
<script>
function ready() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false}
]
});
}
</script>
</head>
<body onload="ready()">
<div>The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$ will be rendered as a block element.</div>
<br>
<div>The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\] will be rendered as a block element.</div>
</body>
</html>
