Blog Post

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

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 for 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 the similar problem.

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

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

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


If you enjoyed this post, please consider contributing to help us with the website’s running costs and keep making awesome content for you. We deeply thank you for your generous contribution!




Do not forget to contact us:

Be sure to let us know your thoughts and questions about this post as well as the other posts on the website. You can either contact us through the β€œContact” tab on the website or email us at support[at]mecharithm.com.

Follow Mecharithm in the following social media too:

YouTube, and Instagram

By Madi

Ph.D. in ME | Robotics Instructor and Researcher | Founder of Mecharithm

Related Posts