Logo
August, 08, 2020

How to Import the Math Equations from LaTex to Your Website (HTML)

As an Engineer and a researcher, we use math equations all the time. In old days, we used to use MathType with Word to write our scientific articles.

However, MathType is not free and it is tedious to use with Word. So ditch them both and use LaTeX instead! LaTex makes life easier, especially while typing mathematical equations. Articles written with LaTex are also aesthetically appealing.

Latex logo

After we launched this Website (Mecharithm), we needed to include some of the projects with math equations that were written in LaTex.

Because Madi was not very experienced with HTML, she was not sure how to convert the Math Equations written in LaTex code into HTML. She did some research and came up with a hack that she thought can be useful for you too.

So, if you are looking to import your math equations from LaTex into your website (HTML) keep reading.

Steps to Import the Math Equations from LaTex to Your Website

  1. Go to https://pandoc.org/try/ and select convert from LaTex to HTML.
latex_to_html_math

2. Import your LaTex code in this form:

\begin{displaymath}

y = \frac{a}{b} + c^2 + d

\end{displaymath}

3. Convert the LaTex to HTML:

<p><span class="math display">\[y = \frac{a}{b} + c^2 + d\]</span></p>

4. Now it’s time to you MathJax. The simplest method is to add the following code to the beginning of your HTML code above:

<script type="text/javascript" async="" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

5. And Voila, the output should look like this:

 

\[y = \frac{a}{b} + c^2 + d\]

 

Below is the video tutorial of this hack if you’d prefer videos over reading:

 

If you find this article interesting, try to share it with your friends and family who may have a similar problem.

Do not forget to explore more blog posts by going to the links below:

https://www.mecharithm.com/mecharithm-blog/

https://www.mecharithm.com/category/mecharithm-hacks/