I have added MathJax support to this blog so that I can typeset mathematics using a large subset of \(\LaTeX\) commands. This functionality works in comments too, which has the nice side effect that it can be used to work around Blogger's limited formatting. In particular, formatting source code in comments can be done as
\(
\verb|int foo(void)| \\
\verb|{| \\
\verb| return 0;| \\
\verb|}|
\)
One annoying thing is that the \(\LaTeX\) commands are not processed when writing or previewing the comment, but they are rendered correctly when it is published...
There are several configurations to choose between, with support for \(\LaTeX\), MathML, and AsciiMath notation, and control over how much functionality is loaded up front, and how much is loaded on-demand. I have chosen the
Note the
\( \verb|int foo(void)| \\ \verb|{| \\ \verb| return 0;| \\ \verb|}| \\ \)which is rendered with most of the formatting intact:
\(
\verb|int foo(void)| \\
\verb|{| \\
\verb| return 0;| \\
\verb|}|
\)
One annoying thing is that the \(\LaTeX\) commands are not processed when writing or previewing the comment, but they are rendered correctly when it is published...
How to enable MathJax in Blogger
MathJax needs to be loaded and configured when the page is loaded. This is done by adding the following<script type="text/javascript" async="async"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML,Safe">
</script>
in the <head> block by editing the blog's template (choose "Template", and click the "Edit HTML" button). This only adds the support to the desktop template, so you need to enable it separately for mobile by pressing the gear button, and choosing the "custom" mobile template (that generates a mobile template from your desktop template).There are several configurations to choose between, with support for \(\LaTeX\), MathML, and AsciiMath notation, and control over how much functionality is loaded up front, and how much is loaded on-demand. I have chosen the
TeX-AMS_CHTML which enables all \(\LaTeX\) support but avoids MathML and AsciiMath.Note the
,Safe modifier added after the configuration name. This disables unsafe constructs such as running javascript from \(\LaTeX\) commands\[E \href{javascript:alert("Einstein says so!")}{=} mc^2\]This is needed in order to prevent commenters messing up the blog by adding evil constructs in comments.
Testing the functionality
Below are some random formulas, just to verify that the rendering works as intended:
\[
\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^{N}(x_{i}-\mu)^{2}}
\]
\[
\left\{
\begin{aligned}
a_1x+b_1y+c_1z &=d_1+e_1 \\
a_2x+b_2y&=d_2 \\
a_3x+b_3y+c_3z &=d_3
\end{aligned}
\right.
\]
\[
\require{AMScd}
\begin{CD}
\pi(X, x_{0}) @>\phi_{*}>> \pi(Y, \phi(x_{0}))\\
@VVuV @VVvV\\
\pi(X, x_{1}) @>\phi_{*}>> \pi(Y, \phi(x_{1}))
\end{CD}
\]
\sigma = \sqrt{\frac{1}{N}\sum_{i=1}^{N}(x_{i}-\mu)^{2}}
\]
\[
\left\{
\begin{aligned}
a_1x+b_1y+c_1z &=d_1+e_1 \\
a_2x+b_2y&=d_2 \\
a_3x+b_3y+c_3z &=d_3
\end{aligned}
\right.
\]
\[
\require{AMScd}
\begin{CD}
\pi(X, x_{0}) @>\phi_{*}>> \pi(Y, \phi(x_{0}))\\
@VVuV @VVvV\\
\pi(X, x_{1}) @>\phi_{*}>> \pi(Y, \phi(x_{1}))
\end{CD}
\]
The post was updated 2017-04-20 with a new link to fetch
MathJax.js as the old MathJax CDN is shutting down.The post was updated 2017-05-12 to use the bugfixed 2.7.1MathJax release.
Testing that \(\LaTeX\) commands actually work in comments.
ReplyDeleteHere is the formatted code from the blog post
\(
\verb|int foo(void)| \\
\verb|{| \\
\verb| return 0;| \\
\verb|}| \\
\)
Is there a way to insert pipe (|) char in source code with \verb? Thanks!
ReplyDeleteYes, the first character after \(\verb!\verb!\) is the delimiter character, so using e.g. \(\verb+\verb!text!+\) will let you use the pipe character within the "text".
Delete\(\LaTeX\) lets you use any character except \(\verb!(!\) and \(\verb!*!\) for the delimiter. It is possible that MathJax is slightly more limited, as it is embedded in HTML — but "most" delimiters should work...
What if a post doesn't use any Latex? Is there a way to make it so the script isn't downloaded uselessly for that one?
ReplyDeleteI don't know any good way of doing that.
DeleteBut the MathJax.js is relatively small, and is only loading the rest of the support if it is needed, so the cost of always loading it is not that bad...
I see, thank you for your reply.
ReplyDeleteOK, I'm frustrated. I put the code in the <head> element as described, even changed 2.7.0 to 2.7.1 as suggested on the mathjax site, tried removing the async parameter, and nothing works. I even deleted my test blog site from 5 years ago and created a new one. The math isn't being rendered at all.
ReplyDeleteI have no trouble with MathJax on my own Wordpress site, but I'd like to get away from self-hosting and use blogger if possible.
What am I missing?
I'm no blogger expert, so I have no idea... :(
DeleteSo my only suggestion is to save the source for your and my blog (as rendered by the browser), and try to see if there are any obvious differences...
Very thanks, now I will not have to use online Tex exporters to image when I will want to post formula on my blog. However I have chosen to use asciimath over tex, because my math symbol set is tiny, so it is not reasonable to use full-scale solution
ReplyDeleteHOW DO YOU ADD ASCIIMathML.js
ReplyDeleteUnfortunately on my blogspot blog MathJax text goes small on mobile phone and I can't find how to fix it... ��
ReplyDelete\[E \href{javascript:alert("Einstein says so!")}{=} mc^2\]
ReplyDelete\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]
ReplyDeletethe dollar sign is replaced by \[ ]\
http://holdenweb.blogspot.com/2011/11/blogging-mathematics.html
ReplyDeleteThis page helps
In the "blog archive" section of a Blogger/Blogspot blog, the MathJax code does not work, it seems. I cannot get it working. So if you put a formula in a post title it does not show up nicely in the blog archive. Any ideas how to fix this?
ReplyDeleteIs there a way to flag SEO spam comments here? The last 5 comments should be removed.
ReplyDeleteI get a mail for each comment, and usually remove the spam right away. But I have been somewhat distracted lately, and missed a few. But they are removed now.
DeleteThanks for telling me!
Another just appeared today. Blogger has a way for you to review comments before allowing them to appear. That's what I do with my blog, which hardly gets any comments but those I have received have been about 1/3 spam.
DeleteThe normal spam filtering used to catch all spam, so I did not see a need to enable more protection. But the spam filter seems to have regressed lately, so you are probably right that it is time to disable comments appearing before review...
Delete