If your blog about educational topics like maths, science or engineering subjects, you might find yourself struggling not knowing how to write write mathematical and scientific equations in your blog posts. You could use Word processors like Microsoft Office Word or Google Docs to write the equation there, then take a screenshot and finally upload it in your blog. However, there are much easier and better ways to write and display math equations in your blog or web page.

In this article, I will cover various easier methods and tools to help you write math equations in your blog or web page. These methods and tools will work on any web page or blogging platforms like Blogger or WordPress. So let’s get started.

Tools to Write Math Equations

Use Blogger Post Editor

The post editor in Blogger has several known issues and may look a bit outdated for the current times. However, it is still quite rich in features. One of the option in Blogger’s post editor is the ability to insert special characters. These special characters also include symbols that are commonly found in mathematical equations and scientific formulas.

To use the Blogger’s post editor, create a new post or page in your Blogger blog and look for the smiley icon       in the toolbar. Click on it to open up the special characters list.

Write Math equations Blogger Post Editor

This special character tools can be useful to write simple and basic equations. If you want to use these characters in your WordPress blog or on any web page, just copy from the Blogger post editor and paste it there.

jqMath

Display Math equations jqmath

jqMath is a Javascript library which makes it easy to put formatted mathematical expressions in web pages. It uses a simple TeX-like syntax, with MathML semantics.

If you would like to add jqMath library to your blog or web page, just add the following lines of code before the </head> section of HTML template.

<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqmath@0.4.9/src/jqmath.css"><script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqmath@0.4.9/dist/jqmath.min.js" charset="utf-8"></script>

Check out more details about jqMath.

KaTeX

Write Math equations on blog Katex

KaTeX claims to be the fastest math typesetting library for the web. Unlike jqMath which has dependency on jQuery library, Katex has no dependency on any other third part libraries.

To use KaTeX, just add the following lines of codes before the </head> section of your HTML template.

<span class="hljs-name">link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script>

Check out more details about KaTeX.

MathJax

Show Math equations using MathJax

MathJax is yet another Javascript library to display mathematical equations on the web. It is very popular compared to other libraries mentioned above. MathJax works with screenreaders & provides expression zoom and interactive exploration. You also can copy equations into Office, LaTeX, wikis, and other software.

To use MathJax in your web page, just add the following lines of codes before the </head> section of your HTML template.

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Check out more details about MathJax.

How to add the scripts in Blogger & WordPress?

So far in this article, I have mentioned how to add the libraries – jqMath, KaTeX and MathJax on a regular HTML page. In case you are confused where to how to add this in a Blogger blog or WordPress blog, read on.

How to add scripts in Blogger

To add scripts in your Blogger blog, you need to edit the HTML code of your Blogger template. Go to Theme > Edit HTML and click anywhere in the code and press Ctrl + F to bring up search bar. Search for </head> and paste it before that.

How to add scripts in WordPress

To add scripts in your WordPress blog, you can use Plugins to make it easy for you. In your WordPress admin dashboard, go to Plugins > Add New and search for “Insert Headers and Footers” plugin and paste the codes in that plugin.

Conclusion

I hope you found this article useful to enable you to write math ans scientific equations in a much easier and better way. If you have any trouble in implementing these solutions, feel free to comment down below or ask in our blogger help community. Y

To get notified on more Blogger tips, WordPress tips and guides, feel free to subscribe to us and follow us on our facebook or twitter.