How to Write Maths Equation in Blogger Blog Using MathJax - Curious CORP

Wednesday, July 17, 2019

How to Write Maths Equation in Blogger Blog Using MathJax

If you are into blogging and running a study website or blog in blogger you must have encountered with a great problem that is, it is very hard to to write complex mathematical equations in the post with all the sub-script and super-script. 


Like WordPress, blogger doesn't provide any special plugin for the same. So you have to manually insert the code to write a beautiful mathematical complex equation and show to the blogger post.

So, for this problem there is a simple solution which is using MathJax Script for your blog which will help you write mathematical equations easily into the blogger post using LaTeX typesetting code.

How to Write Maths Equation in Blogger Blog Using MathJax

What is MathJax ?

MathJax is a JavaScript library with web fonts and graphics which is used to display different complex mathematical equations in a browser. 

MathJax is a cross-browser library. It uses Math-ML, LaTeX and and ASCIIMath-ML from its library to present mathematical equation in the browser.

We will implement MathJax JavaScript into the blogger blog so that whenever you write a mathematical equation in LaTeX it transforms it into a proper equation without any abnormal expression. 

To maintain the loading speed of MathJax JavaScript in Blogger, we will implement it as asynchronously in the blog so that it doesn't affect a blog loading speed. 

Note: MathJax is for those whose blog contains a lot of mathematical complex equations and remember loading extra JavaScript which you do not require increases your loading time, do use it if necessary.


How to add MathJax JavaScript in blogger?

Implementing MathJax into your blogger blog is very easy, just follow the below steps and I am sure it will work properly.


  1. Go to your blog.
  2. Click on the theme option
  3. Click on the edit template button
  4. Copy the following JavaScript from below and paste it below the <head> tag
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>


<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>

After pasting the JavaScript save the template.
Now you are good to go.


How to use MathJax to show mathematical equations in blogger ?

To show complex maths equation in your blog post, you have to use special annotations for describing your equation what I mean by saying this is that you have to use online LaTeX equation editor and put the code in your blog post. 

The below procedure shows how you can create a LaTeX equation.


How to create latex equations for MathJax using online latex editor ?

You just cannot simply write or copy paste math equation even if you have installed MathJax. You have to to use online latest editor to create latex equations as you like, follow the steps to create latex equation.


How to create LaTeX maths equation and use it in blogger


  1. Go to codecogs online latex editor.
  2. Create a normal equation using the given options and and you can also see the output of the code below the editor.
  3. Change it according to your likes if you want it in a line or if you want it separately and also if you want it compressed equation.
  4. After you are done creating your maths equation you have to to convert it into a latex equation. 
  5. Use the bottom tool select LaTeX from the option and it will show a LaTeX equation.
  6. Then copy the LaTeX equation and paste it any post in blogger blog in HTML mode.

 

Conclusion

This was the tutorial to create beautiful maths equation in your blog post easily, if you have any problem you can ask me in the comments. MathJax will automatically create the desired equation once you paste the LaTeX equation in the blog post. If you want to see the preview you can click on the preview button and see what the result will look like.

No comments:

Post a Comment