5 May 2021

LaTeX - Math UI library for Web


Today in this post, I am going to introduce a library which will help your to show mathematical equations and expression in a better ways. That's look nice.

Math UI Library :- Latex

Importing LaTeX Math UI library as Global

Copy the below code into your project head tag.

the script has used differ Attribute to make your project's proformance better and faster rendering.
if you don't use differ, then the LaTeX and it's auto-render extension will be loaded as normal flow.


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.css" integrity="sha384-L+Gq2Cso/Y2x8fX4wausgiZT8z0QPZz7OqPuz4YqAycQJyrJT9NRLpjFBD6zlOia" crossorigin="anonymous"> 
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js" integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

Without auto-render.js extension

if you don't use auto-render.js extension, then you have to do this to show mathematical equation.
when katex.js or katex.min.js is loaded, its patches katex global javascript object.

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

Some Examples of KaTeX Syntax that is rendering Mathematical equations & Expression.

Matrix


 
  katex.render(
    "\\begin{bmatrix}a&b"+ "\\newline "+ "c&d"+"\\end{bmatrix}", element1, { throwOnError: false });
    
    
    

Math Fraction.
var f = "\\dfrac{a-1}{b-1}";

    katex.render(f

   , element , { throwOnError: false });
To show Fraction of two numbers.
katex.render(
 "\\frac a b", element, {});

Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE