Syntax pre code
<pre>
<code class="language-html">
<div id="wrap">
  <div class="berghem">
    Risultato immediato!
    <span>Good training ground.</span>
    </div>
  </div>
  </code>
</pre>
<hr />
<pre>
<code class="language-css">
pre.html-mixed {
  background:#eee;
  padding: 5px 10px 5px;
  margin:0;
  line-height:.985em;
  color:purple;
}
pre.html-mixed {
  background:#eee;
  padding: 5px 10px 5px;
  margin:0;
  line-height:.985em;
  color:purple;
}
  </code>
</pre>
<hr />
<pre>
<code class="lang-javascript">
  /*
  */
$(window).load(function() {
   encodePreElements();
});
function htmlEncode(value) {
   var div = document.createElement('div');
   var text = document.createTextNode(value);
   div.appendChild(text);
   return div.innerHTML;
}
  </code>
  </pre>

<hr />

<pre>
<code class="language-php">  
<?php//***
function max_title_length( $title ) {
    $max = 14;
    if( strlen( $title ) > $max ) {
        return substr( $title, 0, $max ). " …";
    } else {
        return $title;
    }
}
add_filter( 'the_title', 'max_title_length');
?>
  </code>
</pre>

<hr />

<pre>
<code class="html-mixed">
  <div>
    	<p>Unescape > Escape</p>
    </div>
  </code>
</pre>

<hr />
/* CSS 
*
*
*/
html , body {
  margin:0;
  background:#232323;
}
hr {
  min-height:25px;
  margin:0;
  padding:0;
  border:0px none;
  outline:none;
  border-medium:none;
  background:#232323;
  box-shadow:inset 0px -5px 20px 2px black;
}
pre {
  background:#232323;
  color:#E6E1DC;
  padding:5px 0 0;
  border:none !important;
}
.vg-container {
  position: relative;
  overflow: auto;
} 
.vg-container,
.vg-code {
  border: 0;
  margin: 0;
} 
.vg-container .vg-line,
.vg-container .vg-number {
  display: block;
  height: 1.445em;
  vertical-align:middle;
  line-height: 1.105em;
} 
.vg-gutter {
    float: left;
    min-width: 20px;
    width: auto;
    -o-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
} 
.vg-number {
    cursor: pointer;
}
.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 #000;
    text-align: right;
    color: #aaa;
    padding: .135em .5em;
    margin-right: .5em;
  box-shadow:0 5px 20px #000;
}

.vg-code *::-moz-selection,
.vg-code *::-webkit-selection,
.vg-code *::selection,
.vg-line.vg-highlight {
    background-color: #ffc;
}

/*
Railscasts-like
*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #232323;
  color: #e6e1dc;
  -webkit-text-size-adjust: none;
}

.hljs-comment,
.hljs-template_comment,
.hljs-javadoc,
.hljs-shebang {
  color: #bc9458;
  font-style: italic;
}

.hljs-keyword,
.ruby .hljs-function .hljs-keyword,
.hljs-request,
.hljs-status,
.nginx .hljs-title,
.method,
.hljs-list .hljs-title {
  color: #c26230;
}

.hljs-string,
.hljs-number,
.hljs-regexp,
.hljs-tag .hljs-value,
.hljs-cdata,
.hljs-filter .hljs-argument,
.hljs-attr_selector,
.apache .hljs-cbracket,
.hljs-date,
.tex .hljs-command,
.markdown .hljs-link_label {
  color: #a5c261;
}

.hljs-subst {
  color: #519f50;
}

.hljs-tag,
.hljs-tag .hljs-keyword,
.hljs-tag .hljs-title,
.hljs-doctype,
.hljs-sub .hljs-identifier,
.hljs-pi,
.input_number {
  color: #e8bf6a;
}

.hljs-identifier {
  color: #d0d0ff;
}

.hljs-class .hljs-title,
.hljs-type,
.smalltalk .hljs-class,
.hljs-javadoctag,
.hljs-yardoctag,
.hljs-phpdoc,
.hljs-dartdoc {
  text-decoration: none;
}

.hljs-constant {
  color: #da4939;
}


.hljs-symbol,
.hljs-built_in,
.ruby .hljs-symbol .hljs-string,
.ruby .hljs-symbol .hljs-identifier,
.markdown .hljs-link_url,
.hljs-attribute {
  color: #6d9cbe;
}

.markdown .hljs-link_url {
  text-decoration: underline;
}



.hljs-params,
.hljs-variable,
.clojure .hljs-attribute {
  color: #d0d0ff;
}

.css .hljs-tag,
.hljs-rules .hljs-property,
.hljs-pseudo,
.tex .hljs-special {
  color: #cda869;
}

.css .hljs-class {
  color: #9b703f;
}

.hljs-rules .hljs-keyword {
  color: #c5af75;
}

.hljs-rules .hljs-value {
  color: #cf6a4c;
}

.css .hljs-id {
  color: #8b98ab;
}

.hljs-annotation,
.apache .hljs-sqbracket,
.nginx .hljs-built_in {
  color: #9b859d;
}

.hljs-preprocessor,
.hljs-preprocessor *,
.hljs-pragma {
  color: #8996a8 !important;
}

.hljs-hexcolor,
.css .hljs-value .hljs-number {
  color: #a5c261;
}

.hljs-title,
.hljs-decorator,
.css .hljs-function {
  color: #ffc66d;
}

.diff .hljs-header,
.hljs-chunk {
  background-color: #2f33ab;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.diff .hljs-change {
  background-color: #4a410d;
  color: #f8f8f8;
  display: inline-block;
  width: 100%;
}

.hljs-addition {
  background-color: #144212;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #600;
  color: #e6e1dc;
  display: inline-block;
  width: 100%;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.7;
}


/* Color Defaul

.vg-line span.vg-highlight {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}
 
.vg-container .vg-code {
    display: block;
    padding: 1em .5em;
    background: #fff;
}
 
.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 .string,
.vg-code .tag .value,
.vg-code .phpdoc,
.vg-code .tex .formula {
    color: #d14
}
 
.vg-code .title,
.vg-code .id {
    color: #900;
    font-weight: bold
}
 
.vg-code .javascript .title,
.vg-code .lisp .title,
.vg-code .subst {
    font-weight: normal
}
 
.vg-code .class .title,
.vg-code .haskell .label,
.vg-code .tex .command {
    color: #458;
    font-weight: bold
}
 
.vg-code .tag,
.vg-code .tag .title,
.vg-code .rules .property,
.vg-code .django .tag .keyword {
    color: #000080;
    font-weight: normal
}
 
.vg-code .attribute,
.vg-code .variable,
.vg-code .instancevar,
.vg-code .lisp .body {
    color: #008080
}
 
 
.vg-code .regexp {
    color: #009926
}
 
.vg-code .class {
    color: #458;
    font-weight: bold
}
 
.vg-code .symbol,
.vg-code .ruby .symbol .string,
.vg-code .ruby .symbol .keyword,
.vg-code .ruby .symbol .keymethods,
.vg-code .lisp .keyword,
.vg-code .tex .special,
.vg-code .input_number {
    color: #990073
}
 
.vg-code .builtin,
.vg-code .built_in,
.vg-code .lisp .title {
    color: #0086b3
}
 
.vg-code .codeprocessor,
.vg-code .pi,
.vg-code .doctype,
.vg-code .shebang,
.vg-code .cdata {
    color: #999;
    font-weight: bold
}
 
.vg-code .deletion {
    background: #fdd
}
 
.vg-code .addition {
    background: #dfd
}
 
.vg-code .diff .change {
    background: #0086b3
}
 
.vg-code .chunk {
    color: #aaa
}
 
.vg-code .tex .formula {
    opacity: 0.5;
}
*/
/* JS */
//debugger;
//hljs.initHighlightingLoad();

$(window).load(function() {
     encodePreElements();
});
function encodePreElements() {
    var pre = document.getElementsByTagName('codex');
    for(var i = 0; i < pre.length; i++) {
        var encoded = htmlEncode(pre[i].innerHTML);
        pre[i].innerHTML = encoded;
    }
};
function htmlEncode(value) {
   var div = document.createElement('div');
   var text = document.createTextNode(value);
   div.appendChild(text);
   return div.innerHTML;
}

(function($,a,b){var c=1,d=!1,e=!1,f={get:function(b){var c=a.location.hash;if(c.length>0){var d=c.match(new RegExp(b+":{([a-zA-Z0-9,-]*)}"));if(d)return d[1].split(",")}return[]},set:function(b,c){var d=a.location.hash,e,f=b+":{"+c.join(",")+"}",g=d.indexOf(b+":{");if(c.length===0)return this.remove(b);g!==-1?e=d.replace(new RegExp("("+b+":{[a-zA-Z0-9,-]*})"),f):e=d.length>0?d+","+f:f,a.location.hash=e},remove:function(b){a.location.hash=a.location.hash.replace(new RegExp("([,]?"+b+":{[a-zA-Z0-9,-]*}[,]?)"),"")}},g={numberRange:/^([0-9]+)-([0-9]+)$/,pageNumber:/-([0-9]+)$/,multilineBegin:/<span class="([\w-_][^"]+)">(?:.[^<]*(?!<\/span>)|)$/ig,multilineEnd:/(<span class="([\w-_][^"]+)">)?(?:.[^<]*)?(<\/span>)/ig};$.fn._wblz=function(h){function n(){if(d||e)setTimeout(n,100);else{k++;if(k>=10)return;if(h.source&&!l){e=!0,$.ajax({url:h.source,crossDomain:!0,dataType:"text",success:function(a){l=a},error:function(a,b){l="ERROR: "+b},complete:function(){e=!1,n()}});return}b=b||a.hljs;if(!b){d=!0,$.getScript(h.autoload,function(){d=!1,n()});return}j.filter("pre,code").each(function(){function r(b,c,e){var h=!1,i=a.find(".vg-line");c&&(a.find(".vg-highlight").removeClass("vg-highlight"),f.remove(d),k=[]),b=$.type(b)==="array"?b:[b],$.each(b,function(b,c){if(k.indexOf(c)<=-1){!isNaN(parseFloat(c,10))&&isFinite(c)&&(c=parseInt(c,10));if($.type(c)==="string"){var e=g.numberRange.exec(c);if(e){var f=e[1],h=e[2],j="";for(var b=f;b<=h;b++)j+=",#"+d+"-"+b,k.push(b);i.filter(j.substring(1)).addClass("vg-highlight")}else a.find(".vg-line:contains("+c+")").each(function(){var a=$(this).addClass("vg-highlight");a.html(a.html().replace(c,'<span class="vg-highlight">'+c+"</span>"))}),k.push(c)}else{var l=d+"-"+this,m=i.filter("#"+l);m.length&&(m.addClass("vg-highlight"),k.push(c))}}}),!e&&f.set(d,k)}var a=$(this).addClass("vg-container").attr("id",this.id||"vg-"+c++),d=this.id,e=a.find("code"),i=!1,j=!1,k=[];e.length||(e=a,i=!0),h.source&&l&&e.text(l);var n=e.text();b.highlightBlock(e[0],h.tab);var o=e.html().split("\n"),p="",q="";if(!i){var s={},t=0;$.each(o,function(a,b){var c=a+h.firstLine,e=d+"-"+c,f=b;h.numbers&&(p+='<a class="vg-number" rel="#'+e+'">'+c+"</a>");if(s[t]){var i=g.multilineEnd.exec(b);i&&!i[1]?(f='<span class="'+s[t]+'">'+f,delete s[t],t--):f='<span class="'+s[t]+'">'+f+"</span>"}var j=g.multilineBegin.exec(b);j&&(t++,s[t]=j[1]),q+='<div class="vg-line" id="'+e+'">'+f+"</div>"}),q='<code class="vg-code">'+q+"</code>",h.numbers&&(q='<div class="vg-gutter">'+p+"</div>"+q),a.html(q),e=a.find("code"),a.find(".vg-number").click(function(b){var c=$(this),e=c.attr("rel"),h=a.find(e);if(h.hasClass("vg-highlight")){h.removeClass("vg-highlight"),k.splice(k.indexOf(c.text()),1),f.set(d,k),j=!1;return!1}var i=j;j=parseInt(g.pageNumber.exec(e)[1],10),b.shiftKey&&j?r(i<j?i+"-"+j:j+"-"+i,!0):r(j,b.ctrlKey?!1:!0);return!1});var u=a.find(".vg-gutter"),v=u.outerWidth(),w=0,x=!1;h.animateGutter&&a.scroll(function(a){if(this.scrollLeft!==w)if(this.scrollLeft>v){if(this.scrollLeft<w)w=this.scrollLeft,u.hide();else if(this.scrollLeft!==w){if(x)return;var b=this;w=this.scrollLeft,x=setTimeout(function(){x=!1;var a=b.scrollLeft;e.css("marginLeft",v),u.css({"float":"none",position:"absolute",left:a-v}).show().stop().animate({left:a})},500)}}else w=this.scrollLeft,clearTimeout(x),x=!1,u.css({"float":"",position:"",left:""}).show()})}else i&&a.addClass("vg-code");e.dblclick(function(){m(e[0]);return!1});if(h.maxLines>0){var y=a.find(".vg-line").height(),z=parseInt(e.css("paddingTop")),A=y*(h.maxLines+1)+z;a.css({minHeight:y+z,maxHeight:A})}h.highlight&&r(h.highlight,!0,!0);var B=f.get(d);B.length&&r(B,!1,!0)})}}function m(b){var c=a,d=a.document;if(d.body.createTextRange){var e=d.body.createTextRange();e.moveToElementText(b),e.select()}else if(d.createRange){var f=c.getSelection(),e=d.createRange();e.selectNodeContents(b),f.removeAllRanges(),f.addRange(e)}}var i={language:"auto",firstLine:1,maxLines:0,numbers:!0,highlight:null,animateGutter:!0,autoload:"http://softwaremaniacs.org/media/soft/highlight/highlight.pack.js",tab:"    "};h=$.extend({},i,h);var j=this,k=0,l;n();return j}})(jQuery,this,typeof this.hljs!="undefined"?this.hljs:!1)

$(function() {
    // default
    $("pre")._wblz();
    
    // without numbers/gutter and horizontal scrolling
    //$("pre:eq(1), pre:eq(2)").vanGogh({ numbers: true });
    
    // inline highlighting
    //$("code.inline").vanGogh();
    
    // remote source
    //$("#r").vanGogh({ source: "/mekwall/pMZge/show/", maxLines: 20 });
});