$ x = \dfrac{-b \pm \sqrt{b^2-4ac}}{2a} $
When I was a child, this fine specimen was one of the most important academic utilities for me (aside from the calculator). The formula allowed me to bypass hours of mathematical transformations, offering easy plug-and-chug handling for quadratic equations.
But this post isn't about my childhood efforts to maximize my free time. Rather, this is for all math geeks who wish to incorporate a healthy balance of math and science in their websites.
After several hours of hair-pulling updates, I am finally able to implement MathJax on my blog. This little technical problem actually kept me from blogging for several years. Why? Because I want to discuss STEM-related topics and sometimes words aren't enough.
It really shouldn't have taken me this long to implement MathJax, but between solving cancer and running a national non-profit, things happen. Of course, if I was even remotely good at coding, this wouldn't have been an issue at all.
In case you aren't familiar with it, MathJax is an open source JavaScript display engine for mathematics that works in all browsers. It renders embedded $ \LaTeX $ (pronounced la-tech or lay-tech) and Mathematical Markup Language (MathML).
So, in hopes of saving some time for newbie bloggers, I'll use the remainder of this post to share precisely how I implemented MathJax in this Blog... and for good measure, I'll also show you this in Drupal 7.
Now, I can't promise that I've done this the 'correct' way, but the following time-dependent one-dimensional Schrödinger equation should be evidence enough:
$ \left [ - \frac{\hbar^2}{2 m} \frac{\partial^2}{\partial x^2} + V \right ] \Psi = i \hbar \frac{\partial}{\partial t} \Psi $
MathJax in Blogger / blogspot.com
Here's how to get MathJax working in your own Blogger site: Edit the HTML and add the following code immediately below
<head>. That's all. Well, almost.This Git has been formatted for visibility on this blog. In order to get the code to work, you'll need to delete the three backslashes on the right, as well as each of those carriage returns; the backslashes are supposed to indicate the code continues on the next line, but Blogger doesn't process them in the HTML. The MathJax code should then work for you.
MathJax in Drupal 7.x (and 6.x)
Here I describe 2 examples to get MathJax working in Drupal sites, and these methods seem to work equally well in Drupal 6 & 7:
Example 1 - (This didn't really work for me.)
Install this Drupal module to get some MathJax functionality (but you don't really need this).
Example 2 - (This one worked perfectly for me.)
1. Do the following to call the MathJax cdn file directly:
- Edit html.tpl.php in your theme folders (it's a template file).
- Just before
<?php print $scripts; ?>, place the following text:2. Comment out any non-coding '\$' signs with a preceding backslash '\\$'.
3. Start placing your own MathJax equations or references anywhere on the page.
4. Find additional examples of MathJax coding (linked here).
Troubleshooting MathJax with Blogger & Drupal
While working through all of this, I came across a few bugs that could be useful to discuss. If you have other solutions for me, I would appreciate hearing them.
Drupal can be complex if you don't understand overrides and hooks. I'm still learning and don't know much about hooks. Occasionally, you will update code and nothing happens when it should. If this happens to you, try to "flush all caches." It might just reveal your update.
Blogger seems a buggy to me. Whenever I edit and save from HTML, my page title and description disappear. However, they reappear if I: 1) modify their values through the "customize" button, and 2) modify their values a second time, through the "settings" button. I have no idea why this happens, but this is how I fix it. Every. Time.
For those of you who like to copy+paste MathJax, like I do, be careful to use 'clean code' or to strip out any text formatting, because a single
<tag> can keep MathJax from recognizing equations. Read more on this practice at this page (linked here).