javascript bookmark to render code

Question

I recently learned in the chat section that if you use a bookmark you can render LaTeX:

http://meta.math.stackexchange.com/a/3297

The stackexchange sites all render code like this . Anything in between `` gets rendered as code.

I find this feature quite nice and useful. I was wondering if anyone knows how to get the javascript that does this in the stackexchange sites and put it as a bookmark just like the mathjax bookmarks found here:

http://www.math.ucla.edu/~robjohn/math/mathjax.html

That way if I write something with the backtick escapes say in facebook or any other site I could just click on my bookmark that says renderCode and the javascript will do what the same as it is doing in this site.

Anyone know if this has been asked before and/or how to achieve this? Thanks

Answer 1

Here's a start for you:

var replacer = function(s, match) {return "<code>" + match + "</code>";};

"some `delimited` code `sections` here". replace(/`([^`]*)`/g, replacer);
    // ==> "some <code>delimited</code> code <code>sections</code> here"

You can use whatever markup you like in place of "< code >" and "< /code >" to create the effect you like.

You could also use a function like this one:

processTextNodes = function(element, fn) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        var node = children[i];
        var type = node.nodeType;
        if (type == 1) processTextNodes(node, fn);
        if (type == 3) fn.call(this, node);
    }
}

Like this:

processTextNodes(someElement, function(node) {
    node.value = node.value.replace(/`([^`]*)`/g, replacer);
});

In order to apply this to all the text nodes inside an element.

You would still have to turn this into a bookmark, and figure out how to find the right element. And you'll need the markup and CSS to display the output as you like it. But this might be a good start.