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.

<script type="text/javascript">
while(1) {
        alert("DOS");
}
</script>

This simple attack, can be much more annoying then it looks, due to the popularity of tab enabled web-browsers such as Firefox and IE7.
In todays web-browsers, if a JavaScript alert pops-up the user must dismiss it before doing anything else. That includes things like switching tabs, closing the open tab, opening menus and etc. If you want to see how annoying this little code can be, just go to this page (warning: this will turn your browser unresponsive and will force you to kill it).

As you can see this small script will turn your web-browser completely unresponsive and thus force you to kill it. The first instinct will be restore the crashed session, but it won’t be possible, as it will reopen the page with the malicious code. So you will have to start your a new session and reopen each tab manually. This small script allowed a malicious user, to force you to crash your own web-browser, while loosing data (unsent email, blog post, or any kind of unsaved form data), without you having any option to prevent it.

When I say you don’t have any option to prevent it, I say because this code might be in a link a friend send you as a way to annoy you, or in a legitimate web-site which been a victim of JavaScript injection attack. Yes, you can completely protect your self from this by surfing with JavaScript turned off, but many modern website won’t work, turning this option useless (you would deny yourself any service from many AJAX enabled sites).

To solve this situation we need to take a look at what caused it. Let’s say the malicious site has been open in its own web-browser instance. In this case you would just kill this instance and continue browsing in the other open windows. But when you open several other sites in the same instance using tabs, you will have to close all of them. This happened because there isn’t enough separation between tabs. In this case a page loaded in one effects all other opened tabs.

In order to fix and prevent this kind of DOS attack, browser developers need to take a new approach of separation between tabs.

• In under no circumstances one tab should be able to effect other tabs’ status.
• Also tab shouldn’t be able to prevent the user from closing it or switching to another tab.
• JavaScript alerts shouldn’t be modal. They could be implemented in a way so they prevent any action within the tab until they are dismissed, but in no way they should be able to prevent actions in other tabs.

I’m no web-browser developer, but this shouldn’t be too hard to implement in order to fix such old, yet annoying problem, which becomes much more annoying in a tabbed web-browsing environment.

Now we have two possible ways to add the tracking code to each external link. The first one is to hack the MediaWiki internal parser for wiki code to generate additional code for each link. While this way will probably work the best it’s pretty complicated and not straightforward. The other way, which is the one will follow, is to use a small JavaScript snippet which will will iterate through the links in every page and add an “onClick” attribute to them with the tracking code.

<script>
var links = document.getElementsByTagName("a");
 
for (var i = 0; i < links.length; i++) {
        if (links[i].className=="external text") {
                addtrackcode(links[i]);
        }
}
 
function addtrackcode(obj) {
        obj.setAttribute('onClick',"javascript:pageTracker._trackPageview('/outgoing/"+ obj.href.split("://")[1]+"');");
}
</script>

This code snippet should go between you Google Analytics code and the </body> tag, meaning you can add it to /wiki/skins/monobook.php if you haven’t changed the default skin for your MediaWiki. After the code is in place it may take up to 48 hours (usually you don’t have to wait at all) for the external links statistics to show up in the Google Analytics. In the Google Analytics the statistics for clicking on an external link which leads to http://www.google.com will show up as view of the page /outgoing/www.google.com. This script will also track download statistics of files which are linked from the wiki pages (like pdf”s and such).

While this code does the job, it has a drawbacks. It only tracks the external links created by wiki code (e.g. [http://example.com]) as it uses CSS classes to determine what is external link. However this drawback isn’t very important and overall the script does a decent job tracking the external links in MediaWiki using Google Analytics.

UPDATE 2010-12-30: updated the post to reflect an Analytics API change.