MathJax - mathematical formulas in Latex and MathML
MathJax is an open source JavaScript display engine for mathematics that can be integrated in different blogs, like Google blogger, to permit the display of mathematical formulas written in Latex or MathML. I've choosen this engine bacause it not only displays the equations with high quality, but it also allows copy-paste from the blog to external applications like word and latex documents. Additionally it provides accessibility features like zoom.
For the installation of the engine I've followed the following steps:
- In blogger I pressed the 'Design' link
- Then in the links presented in the left frame of the blog management I clicked the 'layout' link
- I chose 'Edit HTML'
- And then inserted after the tag <head>:
Then it's just a question of testing the concept. Bellow I show the cost function for Linear Regression:
$$J\left (\theta _{0},\theta _{1} \right )=\frac{1}{2m}\sum_{i=1}^{m}\left ( h_{\theta }\left ( x^{i} \right ) -y^{i}\right )^2$$
This formula was generated by placing in the message the equation's latex equivalent enclosed between double dollar signs:
$"$ J\left (\theta _{0},\theta _{1} \right )=\frac{1}{2m}\sum_{i=1}^{m}\left ( h_{\theta }\left ( x^{i} \right ) -y^{i}\right )^2 $"$ (the " symbols must be removed from the previous expression - I've placed them just to avoid the conversion of the Latex to the formula). If you do not know Latex you can use an equation editor like the one from CODECOGS)
Finally I would like just to ask you to click with the right mouse button in the above formula. We'll see that a context menu is open with several options:
- Copy-paste: if you select 'Format' and then 'MathML', and then choose 'Show source' you can copy all MathML text and then just paste it to applications like Mathematica or do a paste-special (keep text only option) to word - this should work with any MathML-enabled application
- Accessible Math: where, for instance, you can zoom on the fomula by right-clicking on the formula, select 'Settings', and then 'Zoom trigger' and then selecting 'Click'. Next time you click over the equation you'll see it zoomed
But MathJax isn't perfect. One problem (feature) is that the formulas are placed in the middle of the screen and with 1 (maybe more) newlines before the formula. So this means that if you are writing a sentence and just want to put a simple formula that is kept in the same line of the sentence you just can't do it. For this case an effective alternative is just to write the formula in plain HTML. HTML allows to write greek letters, relations (bigger, bigger or equal, etc), logical operators (there exists, for all, etc), set symbols (contains, element of, etc), infinity, square root, etc. A more complete list of the available possibilities can be found here. And then you can also add subscript or superscipt text which is usually needed for mathematical formulas. And if you want a nice place to test your HTML, find it here.
SyntaxHighlighter - code syntax highlighter
The next challenge was to be able to insert programming code snippets in the blog with language highlights, numbered (to be able to comment the code by referring the line) and allowing easy copy-paste. After some investigation the choice was SyntaxHighlighter.
For the installation of the engine I've followed the following steps:
- In blogger I pressed the 'Design' link
- Then in the links presented in the left frame of the blog management I clicked the 'layout' link
- I chose 'Edit HTML'
- And then insert before the tag </head> (in the link above it is stated before <head> which is wrong):
We can change the style of the code snippet by changing the theme in line 2 to one of the following:
- shThemeDefault.css
- shThemeDjango.css
- shThemeEclipse.css
- shThemeEmacs.css
- shThemeFadeToGrey.css
- shThemeMidnight.css
- shThemeRDark.css
In lines 5 to 28 you find all the programming languages that will be supported for code highlighting. Notice that this is only a subset of all available languages - you can check other languages available here. You may delete the lines corresponding to languages that do not interest you.
Finally, how can then a code snippet be inserted into the blog? Well, as described in the author's site there are two ways to insert the code. In both ways you must be editing the HTML of the message. The method that I prefer imply enclosing the code snippet between a HTML 'pre' like the example bellow:
Notice that in line 1 you must state the programming language of the code snippet. In this case it's python.
The other method imply enclosing the code snippet with a special <script> tag with CDATA around it:
Again, in line 1 you must state the programming language of the code snippet. In this case it's python again.
Nice! Looking forward for more posts!
ReplyDeleteBy the way, have you came across with django as a framework for mod_wsgi?
ReplyDeleteThanks for your comments Carlos. I've not used django so sorry I cannot help you here.
ReplyDelete