MathJax posts
My posts on the string bend calculator used MathJax to display the equations used. But I ended up struggling a while to get them to work on mobile devices. The problem is this: typically MathJax loading needs to go into the document head, but that means editing your blog template.
There are three problems with loading MathJax in your blog template. Firstly it will get loaded for every page, even those that don't need it. Secondly changes to Blogger can apparently break it, requiring work-arounds. Thirdly, to get it to work on mobile devices you have to use a custom template shared with your normal site. Correctly tweaking the template to work on both desktop and mobile would have been hard work. At the same time, having to load MathJax for every page would be even more of a burden for mobile devices.
The apparently simple solution is to put MathJax in the post body instead. This snippet shows how I've put it in the HTML editor in the posts that needed it:
The <script> elements go after the jump-break (the <!--more--> comment), this means they don't load on the front page. If you did use maths in the leader you could put them there to ensure it worked properly whenever the leader was in view. Unlike script elements in <head> these can't be empty, so need a </script> closing tag.
There are two script elements, one for http and one for https, this is because the MathJax CDN has different addresses for http and https and because Firefox security can prevent mixing secure and insecure elements in a page. Normally with CDNs you can use 'relative protocol' (basically leave out the 'http:' or 'https:'), but this doesn't work when the addresses are different. With both sources given separately it will work whether http or https is used.
The TeX-AMS-MML_SVG renderer is used because I was unhappy with the way bracketed fractions were displayed in the default renderer so went for SVG instead.
Finally the "text/x-mathjax-config" section, thanks to Peter Krautzberger on the mathjax-users list for help with this. I previously had a configuration that used entity references (' instead of ') to work within a Blogger template, this doesn't work in the post body. Instead you just need the plain JavaScript, the same as you'd use anywhere else. I've actually dropped the custom configuration altogether now, as I was only using it to allow $x=y$ type notation.
There are three problems with loading MathJax in your blog template. Firstly it will get loaded for every page, even those that don't need it. Secondly changes to Blogger can apparently break it, requiring work-arounds. Thirdly, to get it to work on mobile devices you have to use a custom template shared with your normal site. Correctly tweaking the template to work on both desktop and mobile would have been hard work. At the same time, having to load MathJax for every page would be even more of a burden for mobile devices.
The apparently simple solution is to put MathJax in the post body instead. This snippet shows how I've put it in the HTML editor in the posts that needed it:
<!--more--><script type='text/x-mathjax-config'> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], displayMath: [['\\[','\\]']], processEscapes: true}}); </script> <script src='https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG'></script> <script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG'></script>
There are two script elements, one for http and one for https, this is because the MathJax CDN has different addresses for http and https and because Firefox security can prevent mixing secure and insecure elements in a page. Normally with CDNs you can use 'relative protocol' (basically leave out the 'http:' or 'https:'), but this doesn't work when the addresses are different. With both sources given separately it will work whether http or https is used.
The TeX-AMS-MML_SVG renderer is used because I was unhappy with the way bracketed fractions were displayed in the default renderer so went for SVG instead.
Finally the "text/x-mathjax-config" section, thanks to Peter Krautzberger on the mathjax-users list for help with this. I previously had a configuration that used entity references (' instead of ') to work within a Blogger template, this doesn't work in the post body. Instead you just need the plain JavaScript, the same as you'd use anywhere else. I've actually dropped the custom configuration altogether now, as I was only using it to allow $x=y$ type notation.
Comments