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

It's a substantially different problem. Parsing arbitrary markup to find those sections you want to markup might be challenging. It's not impossible, but what the StackExchange sites do is much simpler, as they start with the pure text and output markup based on it. Have you tried anything yet? — Scott Sauyet, Jul 15 '12 at 01:28
@ScottSauyet, I have not tried it since this is actually the first time I learn about bookmarklets. I'm guessing I could find out how the bookmarklet works with the mathjax and then on facebook create a script to navigate through the posts (the simple pure text) and change it to the markup as they do here. Unfortunately, I'm not really sure how they do that in here. — jmlopez, Jul 15 '12 at 01:34
If you are starting with pure text, then it might not be so hard. But if you are trying to do this to HTML markup, I think you might be in for some difficulty. — Scott Sauyet, Jul 15 '12 at 01:56
@ScottSauyet, pure text. When you post something in facebook you enter pure text. I would love to just write something in between backticks, which are not being rendered in facebook just like $LaTeX$ but if we click on the bookmark then it should grab the contents of the post and change it just like this site does. — jmlopez, Jul 15 '12 at 02:01
@ScottSauyet, see how $LaTeX$ was not rendered? But if you have the bookmarks I showed in the post then they will get changed. More specifically, if you click on the bookmark that says render MathJax. That is what I'm currently doing in facebook but I don't know how to do it for the code sections. — jmlopez, Jul 15 '12 at 02:03
What you enter and what Facebook or another site renders may not be that similar though. For instance, they certainly create hyperlinks. So you won't be able to work with plain text. You can see my suggestion below, but it's only a partial solution. — Scott Sauyet, Jul 15 '12 at 02:22
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13896/discussion-between-jmlopez-and-scott-sauyet) — jmlopez, Jul 15 '12 at 03:33

Scott Sauyet · Answer 1 · 2012-07-15T02:23:22.690

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.

Thanks for the feedback. I will let this sit for now and come back to it when I have more time. No markup for me for now but will get back to it eventually. — jmlopez, Jul 15 '12 at 02:13

javascript bookmark to render code

1 Answers1