A tiddler with LaTeX equations.

I quickly realized MathJax will be a perfect fit for TiddlyWiki which is also based on pure Javascript. It will allow me to enter complex formulas in tiddlers and still be able to carry my wiki anywhere with me, independent of a real TeX installation. I searched the web for an existing MathJaX plugin for TiddlyWiki but I came up empty handed (I did find some links, but they referenced pages that no longer exist). So I regarded it as a nice opportunity to begin writing some plugins for TiddlyWiki and created the MathJaxPlugin which integrates MathJax with TiddlyWiki.

As I don’t have an online TiddlyWiki, you’ll won’t be able to import the plugin, instead you’ll have to install it manually (which is pretty simple).

Start by creating a new tiddler named MathJaxPlugin, and tag with systemConfig (this tag will tell TiddlyWiki to execute the JS code in the tiddler, thus making it a plugin. Now copy the following code to the tiddler content:

/***
|''Name:''|MathJaxPlugin|
|''Description:''|Enable LaTeX formulas for TiddlyWiki|
|''Version:''|1.0.0|
|''Date:''|Jun 25, 2011|
|''Source:''|http://www.guyrutenberg.com/2011/06/25/latex-for-tiddlywiki-a-mathjax-plugin|
|''Author:''|Guy Rutenberg|
|''License:''|[[BSD open source license]]|
|''~CoreVersion:''|2.5.0|
 
Currently the plugin supports the following delemiters:
* """$$""".."""$$""" - Inline equations
* """\(""".."""\)""" - Inline equations
* """\[""".."""\]""" - Display equations
***/
 
//{{{
config.extensions.MathJax = {
  mathJaxScript : "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
  // uncomment the following line if you want to access MathJax using SSL
  // mathJaxScript : "https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML",
  displayTiddler_old : story.displayTiddler,
  displayTiddler: function(TiddlerName) {
    config.extensions.MathJax.displayTiddler_old.apply(this, arguments);
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
  }
};
 
jQuery.getScript(config.extensions.MathJax.mathJaxScript, function(){
    MathJax.Hub.Config({
      extensions: ["tex2jax.js"],
      "HTML-CSS": { scale: 100 }
    });
 
    MathJax.Hub.Startup.onload();
    story.displayTiddler = config.extensions.MathJax.displayTiddler;
});
 
config.formatters.push({
	name: "mathJaxFormula",
	match: "\\\\\\[|\\$\\$|\\\\\\(",
	//lookaheadRegExp: /(?:\\\[|\$\$)((?:.|\n)*?)(?:\\\]|$$)/mg,
	handler: function(w)
	{
		switch(w.matchText) {
		case "\\[": // displayed equations
			this.lookaheadRegExp = /\\\[((?:.|\n)*?)(\\\])/mg;
			break;
		case "$$": // inline equations
			this.lookaheadRegExp = /\$\$((?:.|\n)*?)(\$\$)/mg;
			break;
		case "\\(": // inline equations
			this.lookaheadRegExp = /\\\(((?:.|\n)*?)(\\\))/mg;
			break;
		default:
			break;
		}
		this.lookaheadRegExp.lastIndex = w.matchStart;
		var lookaheadMatch = this.lookaheadRegExp.exec(w.source);
		if(lookaheadMatch && lookaheadMatch.index == w.matchStart) {
			createTiddlyElement(w.output,"span",null,null,lookaheadMatch[0]);
			w.nextMatch = this.lookaheadRegExp.lastIndex;
		}
	}
});
//}}}

After saving the tiddler, reload the wiki and the MathJaxPlugin should be active. You can test it by creating a new tiddler with some equations in it:

This is an inline equation $$P(E)   = {n \choose k} p^k (1-p)^{ n-k}$$ and this is a displayed equation:
\[J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha}\]

Which should result in the tiddler that appears in the above image.

Update 20110819: Removed debugging code from the plugin.

The following code snippet solves the problem by resetting the font used in the editor to monospaced font. Just add the following snippet:

/*{{{*/
.editor {
    font-family: DejaVu Sans Mono, Courier New, monospace;
}
/*}}}*/

To your StyleSheet tiddler (or create it if it doesn’t exist yet). Now the next time you’ll edit a tiddler you will do it using a monospaced font.

The TiddlyWiki solution seemed great, and I’ve started using it. But as the title says, I merely looked over much simpler, yet as powerful, solution – a simple text file. Porting my rowing log to a simple, old-fashioned, text file provided me all the relevant features of TiddlyWiki, such as search, flexibility and working from usb-stick, while using less space and editable using a basic text-editor (or the powerful vim). Using reStructured Text, I got a nice readable journal that can be later processed into even nicer looking html files.

We all want to believe that we know to match the right tool for a task. But maybe, because we tend to adopt newer technologies and utilities all the time (because for a lot of tasks they do provide better tools), we end up over looking simpler, “old-fashioned”, solutions. If I take a moment now to look around, I can come up with several other places where new stuff is used instead of simpler solutions. Take a look around you, and I’m sure that you will be able to find some too.

There was a slight problem as some of the recipes are in Hebrew, and it seems TiddlyWiki doesn’t have built-in support for RTL (right-to-left) tiddlers. However, such support can be added via custom stylesheets and the tiddlers’ tags. The idea for this method is taken from this TiddlyWiki.

Create a new tiddler called “StyleSheet” (without the quotes). This is a special tiddler (a shadow tiddler) that lets you add additional CSS code for your wiki. Insert the following code into the newly created tiddler:

/*{{{*/
div[tags~="RTL"].tiddler {
    direction: rtl;
}
div[tags~="RTL"].tiddler .subtitle {
    direction: ltr;
}
div[tags~="RTL"].tiddler .tagged {
    direction: ltr;
    float: left;
}
/*}}}*/

Now for every tiddler you want to be in RTL direction just add RTL to its list of tags. After you do it, the tiddler will appear correctly. Here is an example of what in RTL looks like after the fix:

A screenshot of an RTL tiddler