- 1. Step 1: Use Kramed instead of Marked
- 2. Step 2: Stop Using hexo-math
- 3. Step 3: Update Mathjax CDN URL
- 4. Step 4: Remember to Activate Mathjax for Your Post
- 5. Other Problems Caused by CloudFlare
- 6. Examples
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 third-party libraries. After doing some research, I finally figured out how to make it work again.
First of all, let’s take a look at some facts:
- Each of them is available on npm as a Hexo plugin: hexo-renderer-kramed and hexo-renderer-marked.
- 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
<your-project-dir>/node_modules/hexo-renderer-kramed/lib/renderer.js and change the following block:
hexo-math 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
hexo-math is already deprecated, and it doesn’t work no more.
So first, if you have
hexo-math installed, uninstall it:
Then, install a relatively newer package hexo-renderer-mathjax that DOES work:
In the previous step, we installed a Hexo plugin called
hexo-renderer-mathjax that is basically a wrapper for a Latex renderer library called Mathjax.
By today (May 3, 2017), the latest version of
hexo-renderer-mathjax 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
Then, change the
<script> tag that contains the CDN URL to the following:
Finally, save the file and close.
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,
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”.
To view the source code behind each of the following equations, right click on the equation, right click → Show Math As → TeX Commands