Velocity Syntax Highlighter

by Elias Ranz-Schleifer

HTML

<pre><code>
$javascript.push("/path/to/file")
#inline()
    $('.lazy.bg2').attr({'data-src':'/img_path2.jpg'}).css('background','red');
    #if($myVar == "hi")
    #elseif($myVar == "there")
          $('.lazy.bg1').attr({'data-src':'/img_path.jpg'})
    #else
          $('.lazy.bg3').attr({'data-src':'/img_path3.jpg'})
    #end
    $('.lazy.bg2 a').attr({'data-href':'/random-path2.htm'})
    $('.lazy.bg1 a').attr({'data-href':'/random-path.htm'})
#end

#if($test.method == "myVal")
  #set($foo = "swag")
#elseif($foo == "bar")
  #set($foo = "ballin")
#elseif($myObject.randomMethod().contains("myVal"))
  #set($foo = "weeee")
#else
  #set($foo = "sad days")
#end
#set($testVar = "Test value")
#parse("/path/to/file")</code></pre>

CSS

.velocity-if,.equalSign, .velocity-set, .velocity-parse, .velocity-inline, .velocity-end {
    color: #89bdff;
}

.velocity-variable, .velocity-if-inner {
    color: #FFF;
}

.velocity-if-variable, .velocity-object {
    color: #e28964;
}

.velocity {
    background: #000;
    border-radius:8px;
}

pre.velocity code, .velocity-if-inner {
    color:#aeaeae;
}

.velocity-inner, .velocity-parse-path, .velocity-string, .jquery-selector {
    color:#a1dc58;
}

.jquery-function-values {color:red;}
.velocity-inline-end {color:yellow;}

JavaScript

// Adds the class needed for the velocity syntax highlighting.
$("pre code").each(function(){
    var codeString = $(this).html().toString();
    if(/#set/i.test(codeString) || /#parse/i.test(codeString) || /#inline()/.test(codeString) || /\$javascript\.push/.test(codeString)) {
        $(this).parent().addClass('velocity');
    }
});

// Velocity Set/Parse/JS Push
var codeElement = $('.velocity code');
regExVelocity(codeElement, /#set\((.+?)\)/g, "<span class='velocity-set'>#set(</span><span class='velocity-inner'>$1</span><span class='velocity-set'>)</span>");
regExVelocity(codeElement, /#parse\("(.+?)"\)/g, "<span class='velocity-parse'>#parse(</span><span class='velocity-parse-path'>\"$1\"</span><span class='velocity-parse'>)</span>");
regExVelocity($('.velocity code .velocity-inner'), /(.+?)=/g, "<span class='velocity-variable'>$1</span><span class='equalSign'>=</span>");
regExVelocity(codeElement, /\$([a-zA-z]+?)\./g, "<span class='velocity-object'>\$ $1 </span>.");
regExVelocity(codeElement, /#inline\(\)/g, "<span class='velocity-inline'>#inline()</span>");

// Velocity If/End
regExVelocity(codeElement, /#if\((.+)\)/g, "<span class='velocity-if'>#if(</span><span class='velocity-if-inner'>$1</span><span class='velocity-if'>)</span>");
regExVelocity(codeElement, /#end/g, "<span class='velocity-end'>#end</span>");
regExVelocity($('.velocity-if-inner'), /\$(.+?)\./g, "<span class='velocity-object'>\$ $1 </span>.");
regExText($(".velocity-object"),/ /g, "");
regExVelocity(codeElement,/\("(.+?)"\)/g, "(<span class='velocity-string'>\"$1\"</span>)");

$('pre.velocity code').each(function(){
	var html = $(this).html();
  var str = html.toString(html);
  str = str.substring(str.indexOf("#inline()") + 17);
  var textArray = str.split("\n");
  var newhtml = getInlineEnd(html,textArray);
  regExVelocity($(this),str,newhtml);
});

function getInlineEnd(str,textArray) {
    for(var i = 0; i <= textArray.length; i++) {
    	if(i == 0) {
      	textArray[i] = "<span...