Make Hexo Support Math Again
You may already know that the framework behind this blog is called Hexo.
Hexo is simple, powerful, and it works almost at all times. However, today I suddenly found the math expressions on this blog stopped showing up. I didn’t update my blog for quite some time, and last time when I checked, all the math expressions worked perfectly without any problem.
So, I was pretty sure that there must be some problem with the thirdparty libraries. After doing some research, I finally figured out how to make it work again.
Step 1: Use Kramed instead of Marked
First of all, let’s take a look at some facts:
 Kramed and Marked are both Markdown parsers/compilers written in JavaScript.
 Each of them is available on npm as a Hexo plugin: hexorendererkramed and hexorenderermarked.
 When Hexo is installed, Marked is used as the default Markdown renderer.
Honestly, I don’t really know why this step is necessary, or what exactly is missing in Marked for Hexo. But the following steps worked only AFTER I replaced Marked with Kramed.
So, to uninstall Marked and install Kramed, do the following:

Then, go to <yourprojectdir>/node_modules/hexorendererkramed/lib/renderer.js
and change the following block:

To

Step 2: Stop Using hexomath
hexomath
was considered as the first choice for rendering math expressions by a lot of developers, and it was introduced in a lot of online tutorials as well. However, the bad news is that hexomath
is already deprecated, and it doesn’t work no more.
So first, if you have hexomath
installed, uninstall it:

Then, install a relatively newer package hexorenderermathjax that DOES work:

Step 3: Update Mathjax CDN URL
In the previous step, we installed a Hexo plugin called hexorenderermathjax
that is basically a wrapper for a Latex renderer library called Mathjax.
Previously, Mathjax was served by its developers on mathjax.org; however, recently they decided to stop serving the JavaScript file on their own server, and all websites that are using Mathjax better switch to the new CDN URL provided by CloudFlare instead.
By today (May 3, 2017), the latest version of hexorenderermathjax
is still using the deprecated CDN URL, so we have to manually update it in the package that was installed by npm early on.
First, open the file <pathtoyourproject>/node_modules/hexorenderermathjax/mathjax.html
.
Then, change the <script>
tag that contains the CDN URL to the following:

Finally, save the file and close.
Step 4: Remember to Activate Mathjax for Your Post
Although now Mathjax related feature has been properly configured, it is NOT activated in each of your posts by default. This was designed by the Hexo team to avoid possible conflicts between Markdown and Latex renderers.
However, if you do wanna use Mathjax for a specific post, remember to include the mathjax
derivative and set it as true
in the head of that post. For example,

Other Problems Caused by CloudFlare
If you are using CloudFlare CDN for your website, you may be tempted to enable all the acceleration features like I used to do.
However, after I did some research, I found that Mathjax can be interrupted by the Rocket Loader feature provided by CloudFlare. So, I’d recommend you set it as either “Off” or “Manual”.
Examples
To view the source code behind each of the following equations, right click on the equation, right click → Show Math As → TeX Commands