Prettification II: Javascript Strikes Back

In my last post, I covered math-symbol prettification in Emacs. While writing it, I got interested in doing the same thing in Javascript for the code samples in this blog. So I wrote some code!

var replaceAll = function(str, replacements) {
    _.each(replacements, function(replacement, pattern) {
        str = str.replace(pattern, replacement);
    });
    return str;
};

var prettifySymbols = {
    coq: {
        'forall': '∀',
        '->': '→',
        'exists': '∃',
        '=>': '⇒',
        'False': '⊥',
        'True': '⊤'
    }
};

$(function() {
    _.each(prettifySymbols, function(replacements, lang) {
        $('code.' + lang).each(function() {
            var code = $(this);
            if (code.hasClass('nopretty')) return;
            code.children('span').each(function() {
                var span = $(this);
                var originalText = span.text();
                var replacementText = replaceAll(originalText, replacements);
                if (originalText !== replacementText) {
                    span.bind('pretty-replace', function() {
                        span.text(replacementText);
                    });
                    span.bind('pretty-original', function() {
                        span.text(originalText);
                    });
                };
            });
            code.bind('copy', function() {
                code.children('span').trigger('pretty-original');
                setTimeout(function() {
                    code.children('span').trigger('pretty-replace');
                }, 0);
            });
            code.children('span').trigger('pretty-replace');
        });
    });
});

The tricky thing here is ensuring that if you copy a code sample, you get the original text instead of the prettified text.

The code above uses Underscore and jQuery, and is designed to work with Jekyll code-blocks. Should be pretty easy to modify it for other code-sample formats, but your mileage may vary.