June 28, 2013

Enabling formulas and code highlighting on Blogspot

This blog uses MathJax to embed LaTeX-style formulas and Google Code Prettify for syntax highlighting.

To install these tools select the Template tab from the blog admin panel and click Edit HTML. Insert the following code just after the opening head tag.
<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/>    
  <script type='text/x-mathjax-config'>//<![CDATA[
    MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      jax: ["input/TeX", "output/HTML-CSS"],
      displayAlign: "left",
      styles: {
        ".MathJax_Display": {
          //"background-color": "rgb(230,230,230)",
          "padding-left": "4em",
          "float": "left",
          "display": "inline"
        }
      },
      tex2jax: {
        inlineMath: [ ['$','$'] ],
        displayMath: [ ['$$', '$$'] ],
        processEscapes: true
      },
      "HTML-CSS": { availableFonts: ["TeX"] }
    });
  //]]></script>
  <script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default' type='text/javascript'>
</script>   
The in posts you'll be able to use the following syntax to highlight code
<pre class="prettyprint">
int f(int x)
{
  return 2 * x;
}
</pre>
and \$ and \$\$ delimiters to insert LaTeX math inline or in display style.

A couple of off topic tips. To make the text area adapt to the browser window, in the same editor search for the text .content-outer and edit the code around it as follows:
body {
min-width: 100px /*$(content.width);*/
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 100px /*$(content.width);*/
max-width: 2000px /*$(content.width);*/
_width: 100% /*$(content.width);*/
}
Also, in math jax, it's possible to define macros as follows:
TeX: {
  Macros: {
    cov: '{\\operatorname{cov}}',
    reals: '{\\mathbb{R}}',
    T: '{\\mathrm{T}}',
    tr: '{\\operatorname{tr}}',
    paren: ['\\left( #1 \\right)', 1],
    bracket: ['\\left[ #1 \\right]', 1],
    brace: ['\\left\\{ #1 \\right\\}', 1]
  }
}

No comments:

Post a Comment