How to add math on your blog : MathJax + Blogger

  • Post category:Tutorial
How to add math on your blog : MathJax + Blogger

This tip is useful for engineering and science bloggers who want to share their knowledge on the web. Here is the way I found. I recently tested it on the Blogger system,  the purpose is to share science tutorials with you using the correct math way.

Let’s do it!

Draft on paper of the Debye-Scherrer equation for crystal size calculation

Step 1: Add a new gadget to your blog and copy and paste the following script.

<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>

Step 2: Write code in a new post following using latex language inside:

  • Inline:           \( latex code here \)
  • Paragraph:    \[ latex code here \]

Step 3: Equation test: Debye -Scherrer  for crystal size calculation

 D(\text{nm}) = \frac{0.9\lambda}{\beta cos{\theta}}
  • D: Crystal size in nanometers
  •  \lambda : 0.15406 nm  X-Ray wavelength
  •  \beta :  FWHM in radians (Full width at half maximum)
  •  \theta  : Angle location of the peak in radians.

If you have any questions, please comment on the post.

Leave a Reply

This Post Has 9 Comments

  1. Jose Darias

    not working in my posts. how did you do it? thanks a lot

    1. Jesus Capistran

      I think you should add the backslash: \
      Sorry for my mistake. I’ll fix it right now.

      Example:

      Step 3: Equation test: Debye -Scherrer for crystal size calculation

          \[ D(\text{nm}) = \frac{0.9 \lambda}{\beta\cos{\theta}} \]

      D: Crystal size
      \lambda : 0.15406 nm X-Ray wavelength
      \beta : FWHM in radians (Full width at half maximum)
      \theta : Angle location of the peak in radians.

      1. Jose Darias

        Well done my friend!! It works fine now for me!!! Thansk a lot and don’t worry because we have a lot of time to learn a lot of things right now!!! Isaa Newton was in quarantine when he wrote all the major theorems about Calculus and Newtonian Phisycs due to the bubonic plague. Can you suggest some LaTeX guide to start formatting some text or if you have one please to send me to my email. Thanks a lot.

  2. Jose Darias

    By the way, some symbols. like Integrals got cutted when show in the post when rendered. Can you please show me how to fix that problem??

    1. Jesus Capistran

      You can try display mode:

          \[\int_{a}^{b} x^2 dx\]

      . I test it on blogger and work it.

      1. Jesus Capistran

        You can copy the following code:

        Integral \int_{a}^{b} x^2 dx inside text

            \[\int_{a}^{b} x^2 dx \]

        1. Jose Darias

          Hello again Jesus:

          I tried all the options you described in the comments above but Im still having the same issue; integrals do not show properly on my blog. They look like they show from half up but half bottom is always hide.

  3. josedariasc

    Hey Jesus I think actually is a bug with some rendering settings in Version 3 so I just moved to version 2 and everything worked fine .I really don’t know much about settings and programming only basic things like HTML and a few other simple settings. I had to overcome the problem with old version until Mathjax v3 post a new release. Thanks a lot! Keep in touch!! Take care of COVID19!!