ACE editor for editing your gists

acegist.user.js

// ==UserScript==
// @id             acegist
// @name           ACEgist
// @author         Antoine BERNIER (abernier)
// @version        0.1.2
// @description    ACE editor in your gists
// @match          https://gist.github.com/gists/*/edit
// ==/UserScript==

(function (d, cb) {

    //
    // A script loader over here!
    //
    
    if (typeof $LAB === 'undefined') {
        var s;

        s         = d.createElement('script');
        s.src     = 'https://raw.github.com/getify/LABjs/master/LAB.min.js';
        s.onload  = function () {
            var s;

            s             = d.createElement('script');
            s.textContent = '(' + cb.toString() + ')();';

            d.body.appendChild(s);
        }
        d.body.appendChild(s);
    } else {
        cb()
    }
}(document, function () {

    //
    // Syntax highlighting modes
    //
    
    var modes = {
        'js': {
            url: 'https://raw.github.com/ajaxorg/ace/v0.2.0/build/src/mode-javascript.js',
            module: 'ace/mode/javascript'
        },
        'coffee': {
            url: 'https://raw.github.com/ajaxorg/ace/v0.2.0/build/src/mode-coffee.js',
            module: 'ace/mode/coffee'
        },
        'html': {
            url: 'https://raw.github.com/ajaxorg/ace/v0.2.0/build/src/mode-html.js',
            module: 'ace/mode/html'
        },
        'css': {
            url: 'https://raw.github.com/ajaxorg/ace/v0.2.0/build/src/mode-css.js',
            module: 'ace/mode/css'
        }
    };

    $LAB
        .script('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js')
        .script('https://raw.github.com/ajaxorg/ace/v0.2.0/build/src/ace.js')
        .script('https://raw.github.com/ajaxorg/ace/v0.2.0/build/src/theme-twilight.js')
        .wait(function () {
            $('textarea').each(function (i, el) {
                var $el,
                    $container,
                    editor,
                    ext;
                
                $el = $(el);
                
                //
                // Principle: inject an DOM element (sized and positioned) and hide the textarea
                //
                
                $container = $('<div/>').css({
                    position: 'relative',
                    width: $el.width(),
                    height: $el.height()
                }).insertAfter(el);
                
                $el.hide();
                
                //
                // ACE magic
                //
                
                editor = ace.edit($container[0]);

                editor.setTheme('ace/theme/twilight');
                
                // Keep hidden textarea in sync
                
                editor.getSession().setValue($el.val());
                editor.getSession().on('change', function () {
                    $el.val(editor.getSession().getValue());
                });

                // Syntax highlighting depending on filename.<ext>
                
                ext = $el.closest('.file').find('.name input').val().split('.').slice(-1)[0];
                modes[ext] && $LAB.script(modes[ext].url).wait(function () {
                    var Mode = require(modes[ext].module).Mode;
                    editor.getSession().setMode(new Mode());
                });
            });
        })
    ;
}));

@rpavlik: ok should be fixed now, thx!