GistViewer

gistviewer.user.js

// ==UserScript==
// @name           GistViewer
// @namespace      http://d.hatena.ne.jp/kiy0taka/
// @include        *
// @exclude        http://gist.github.com/*
// @exclude        http://*.hatena.ne.jp/*
// ==/UserScript==
(function() {

    function xpath(query, contextNode) {
        contextNode = contextNode || document;
        var snapshot = document.evaluate(
            query,
            contextNode,
            null,
            XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
            null);
        var result = [];
        for (var i=0,n=snapshot.snapshotLength; i<n; i++) {
            result.push(snapshot.snapshotItem(i));
        }
        return result;
    }

    function each(arr, func) {
        for (var i=0,n=arr.length; i<n; i++) func(arr[i], i);
    }

    function css(e, css) {
        var style = e.style;
        for (var n in css) style[n] = css[n];
    }

    var gistJsPattern = /^http:\/\/gist\.github\.com\/\d+\.js$/;

    var isGistSupported = false;
    each(xpath('//script[@src]'), function(s) {
        isGistSupported = isGistSupported || s.src.match(gistJsPattern);
    })

    if (isGistSupported) return;

    var gistUrlPattern = /^http:\/\/gist\.github\.com\/\d+$/;
    var gistLinks = [];
    each(xpath('//a[@href]'), function(l) {
        if (l.href.match(gistUrlPattern)) gistLinks.push(l);
    })

    if (!gistLinks.length) return;

GM_addStyle(<><![CDATA[
.line_numbers {
    background-color:#ECECEC;
    border-right:1px solid #DDDDDD;
    color:#AAAAAA;
    padding: 0em 0.5em 0em 1em;
    text-align:right;
}
.syntax  { background: #ffffff;}
.syntax .c { color: #999988; font-style: italic; line-height: 1.2em }
.syntax .err { color: #a61717; background-color: #e3d2d2 }
.syntax .k { font-weight: bold }
.syntax .o { font-weight: bold }
.syntax .cm { color: #999988; font-style: italic }
.syntax .cp { color: #999999; font-weight: bold }
.syntax .c1 { color: #999988; font-style: italic }
.syntax .cs { color: #999999; font-weight: bold; font-style: italic }
.syntax .gd { color: #000000; background-color: #ffdddd }
.syntax .gd .x { color: #000000; background-color: #ffaaaa }
.syntax .ge { font-style: italic }
.syntax .gr { color: #aa0000 }
.syntax .gh { color: #999999 }
.syntax .gi { color: #000000; background-color: #ddffdd }
.syntax .gi .x { color: #000000; background-color: #aaffaa }
.syntax .go { color: #888888 }
.syntax .gp { color: #555555 }
.syntax .gs { font-weight: bold }
.syntax .gu { color: #aaaaaa }
.syntax .gt { color: #aa0000 }
.syntax .kc { font-weight: bold }
.syntax .kd { font-weight: bold }
.syntax .kp { font-weight: bold }
.syntax .kr { font-weight: bold }
.syntax .kt { color: #445588; font-weight: bold }
.syntax .m { color: #009999 }
.syntax .s { color: #d14 }
.syntax .na { color: #008080 }
.syntax .nb { color: #0086B3 }
.syntax .nc { color: #445588; font-weight: bold }
.syntax .no { color: #008080 }
.syntax .ni { color: #800080 }
.syntax .ne { color: #990000; font-weight: bold }
.syntax .nf { color: #990000; font-weight: bold }
.syntax .nn { color: #555555 }
.syntax .nt { color: #000080 }
.syntax .nv { color: #008080 }
.syntax .ow { font-weight: bold }
.syntax .w { color: #bbbbbb }
.syntax .mf { color: #009999 }
.syntax .mh { color: #009999 }
.syntax .mi { color: #009999 }
.syntax .mo { color: #009999 }
.syntax .sb { color: #d14 }
.syntax .sc { color: #d14 }
.syntax .sd { color: #d14 }
.syntax .s2 { color: #d14 }
.syntax .se { color: #d14 }
.syntax .sh { color: #d14 }
.syntax .si { color: #d14 }
.syntax .sx { color: #d14 }
.syntax .sr { color: #009926 }
.syntax .s1 { color: #d14 }
.syntax .ss { color: #990073 }
.syntax .bp { color: #999999 }
.syntax .vc { color: #008080 }
.syntax .vg { color: #008080 }
.syntax .vi { color: #008080 }
.syntax .il { color: #009999 }
]]></>)

    each(gistLinks, function(l) {
        GM_xmlhttpRequest({
            method : 'GET',
            url : l.href,
            onload : function(res) {
                var tmp = document.createElement('div');
                tmp.innerHTML = res.responseText;

                var wrapper = document.createElement('div');
                css(wrapper, {
                    'width' : '100%',
                    'cssFloat' : 'left',
                    'scroll' : 'auto'
                })

                var parent = l.parentNode;
                parent.insertBefore(wrapper, l);

                var syntax = document.createElement('div');
                syntax.className = 'syntax';
                wrapper.appendChild(syntax);

                var lineNumbers = xpath('//pre[@class = "line_numbers"]', tmp)[0];
                css(lineNumbers, {
                    'width' : '3%',
                    'cssFloat' : 'left',
                    'paddingLeft' : '0.5em',
                    'paddingRight' : '0.5em',
                    'borderWidth' : '1px',
                    'borderColor' : 'silver',
                    'borderStyle' : 'solid',
                    'lineHeight' : '1.2em'
                })

                var code = xpath('//div[@class = "highlight"]/pre', tmp)[0];
                css(code, {
                    'width' : '90%',
                    'cssFloat' : 'left',
                    'overflow' : 'auto',
                    'paddingLeft' : '0.5em',
                    'paddingRight' : '0.5em',
                    'borderWidth' : '1px',
                    'borderLeftWidth' : '0px',
                    'borderColor' : 'silver',
                    'lineHeight' : '1.2em',
                    'borderStyle' : 'solid'
                })

                syntax.appendChild(lineNumbers);
                syntax.appendChild(code);
            }
        });
    })
    
})()