Add MathJax Beautiful Mathematic Notations for Blogger Blogs

Add beautiful & stunning math characters/ symbols/ notations for your blogs on Blogger made super easy by using MathJax javascript library.

Install MathJax javascript library/ plugin in just a few minutes & your math notations in your blog posts on Blogger will display so beautiful -- no reader setup required!

What is MathJax?


Beautiful math in all browsers - A JavaScript display engine for mathematics that works in all browsers. No more setup for readers. It just works.

Install MathJax for Blogs on Blogger [SOLVED]

MathJax Features & Benefits


High-quality typography

MathJax uses CSS with web fonts or SVG, instead of bitmap images or Flash, so equations scale with surrounding text at all zoom levels.

Modular Input & Output

MathJax is highly modular on input and output. Use MathML, TeX and ASCIImath as input and produce HTML+CSS, SVG and MathML as output.

Accessible & Usable

MathJax is compatible with screenreaders & provides zoom for everyone. You can also copy equations into Office, LaTeX, wikis, and other software.

How to add MathJax for Blogs on Blogger?


  • Go to Theme > Edit HTML
  • Find <head> tag
  • Paste below MathJax recommended setup underneath the <head> tag

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });
</script>
<script async="async" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript">
</script>


  • Click Save Theme


Display Math Notations in Blog Posts


Now create a new posts to insert your mathematic characters. Using the above setup, any math characters you require to display using MathJax, enclose characters with the "\$ " (without quotes) for inline display or " \$\$ " (without quotes) for a block notation display.

Below are examples:-

This is a MathJax inline notation: $x^2$ . More text after inline notations $x^2$ $x^3$

This is a MathJax inline notation: $x^2$ . More text after inline notations $x^2$ $x^3$

Below is a MathJax block notation:

$$x^2$$
$$x^4$$
$$x^8$$

$$x^2$$
$$x^4$$
$$x^8$$

Quick Tips:

Use backslash " \ " (without quotes) before a dollar sign to escape MathJax automated notations. Below are examples:-

Escaped MathJax notations \$x^2\$

\$x^2\$

Non escaped MathJax notations $x^2$

$x^2$

Hope you find this tutorial useful.

References:


1 comment:

  1. Did not work for me. When I saved your code in my theme, it was changed. Frustratingly, when I tried to post it here, it was rendered correctly, so I took a screen shot which you can see here: https://drive.google.com/open?id=1DDrbQTrdnpoMLLut_ABCX3-6S8IuLt0t This has to do with representing special characters.

    Also the code was rendered in black unlike all the other script, leading me to think it is not being recognized properly.

    Any ideas?

    ReplyDelete

Insert search keyword(s) & press enter...

Subscribe & Get Latest Stories via Mail...

 
Our website development is made possible by displaying online advertisements.
Please consider supporting us & our projects by disabling your Ad Blocker. Thank You.
Our website requires javascripts turned on for best user experience.
Please consider to turn on your web browser javascript. Thank You.
GDPR: Data submitted at our site is managed by 3rd party processors. Read more on how data is collected, managed & processed at our site. Learn More