Mekwall's Van Gogh

by darcyclarke

HTML

<pre><code class="language-javascript">// Van Gogh; express your code in color
var setArray = function(elems) {
    this.length = 0; // This is a comment
    push.apply(this, elems);
    return this;
}

var aString = "Hello world!";</code></pre>

CSS

body, html {
    font: 13.34px helvetica,arial,freesans,clean,sans-serif;
}

body * {
    line-height: 1.4em;
}

p { margin: 1em 0; font-size: 1.1em; }

h1 {
    margin-bottom: 0;
    font-size: 30px;
    height: 54px;
    line-height: 54px;
    font-weight: bold;
    letter-spacing: -1px;
    text-shadow: 1px 1px 0 white;
    color: #495961;
}

h2 {
    color: #4183C4;
    font-size: 1.9em;
    height: 2em;
    line-height: 2em;
    font-weight: bold;
}

.vg-container { overflow-x: auto; }

.vg-container,
.vg-code {
    border: 0;
    margin: 0;
}

.vg-container .vg-line,
.vg-container .vg-number {
    display: block;
    height: 1.5em;
    line-height: 1.5em !important;
}

.vg-line.vg-highlight {
    background-color: #ffc;
}

.vg-line span.vg-highlight {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}

.vg-gutter {
    float: left;
    width: 20px;
}

.vg-number {
    cursor: pointer;
}

/*
github.com style (c) Vasily Polovnyov <[email protected]>
extended and modified for vangogh by Marcus Ekwall <[email protected]>
*/

.vg-container {
    font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace;
    font-size: 12px;
    border: 1px solid #ddd;
}

.vg-gutter {
    background-color: #ececec;
    border-right: 1px solid #ddd;
    text-align: right;
    color: #aaa;
    padding: 1em .5em;
    margin-right: .5em;
}

.vg-container .vg-code {
    display: block;
    padding: 1em .5em;
    background: #fff;
    overflow: auto;
    overflow-y: hidden;
}

.vg-code {
    color: #000;
    background: #f8f8ff;
    border: 0;
    padding: .4em;
}

.vg-code .comment,
.vg-code .template_comment,
.vg-code .diff .header,
.vg-code .javadoc {
    color: #998;
    font-style: italic
}

.vg-code .keyword,
.vg-code .css .rule .keyword,
.vg-code .winutils,
.vg-code .javascript .title,
.vg-code .lisp .title,
.vg-code .subst {
    color: #000;
    font-weight: bold
}

.vg-code .number,
.vg-code .hexcolor {
    color: #40a070
}

.vg-code...

JavaScript

(function($, window, hljs){
    // one can become many
    var painters = 1,
        waitForLoad = false;

    // hey vincent!
    $.fn.vanGogh = function(options){
        var defaults = {
            language: "auto",
            firstLine: 1,
            maxLines: 0,
            numbering: true,
            tab: "    ",
            hljs: "",
            highlight: null
        };
        // merge defaults and passed options
        options = $.extend({}, defaults, options);
        
        // scope vars
        var elems = this,
            run = 0,
            currentHash = window.location.hash;
        
        // cross-browser compatible selection
        function selectCode(elm) {
            var w = window,
                d = window.document;
            if (d.body.createTextRange) {
                var range = d.body.createTextRange();
                range.moveToElementText(elm);
                range.select();
            } else if (d.createRange) {
                var sel = w.getSelection(),
                    range = d.createRange();
                range.selectNodeContents(elm);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
        
        // this function puts Van Gogh into action
        function paint() {
            // check if we're waiting for autoload
            if (waitForLoad) {
                setTimeout(paint, 100);
                return;
            }
            run++;
            // abort if run 10 times or more
            if (run >= 10) { return; }
            hljs = hljs || window.hljs;
            if (!hljs) {
                // autoload highlight.js
                waitForLoad = true;
                $.getScript(options.hljs+"/highlight.pack.js", function(){
                    waitForLoad = false;
                    paint();
                });
                return;
            }
            // iterate passed elements
           ...