// Pure JQuery Syntax Highlighter by Taufik Nurrohman // Still an experimental :) // https://plus.google.com/108949996304093815163/about $(window).load(function() { $('pre').each(function() { var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)", rep1 = new RegExp(list + " ", "ig"), rep2 = new RegExp(list + "( ?)<span", "ig"), $this = $(this); $this.html($this.html() .replace(/(<br>|\n)$/ig, "") .replace(/^\n/g, "<br>") .replace(/(\t)/g, " ") .replace(/"/ig, "\"") .replace(/'|'/ig, "\'") .replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>") .replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>") .replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>") .replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>") .replace(/(\d+(?!(.*<)))/g, "<span class='num'>$1</span>") .replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>") .replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>") .replace(/<(.*?)>/g, "<span class='tag'><$1></span>") .replace(/<!--([\s\S]*?)-->/gm, "<span class='comment'><!--$1--></span>") .replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>") .replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>") .replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>") .replace(rep1, "<span class='keyword'>$1</span> ") .replace(rep2, "<span class='keyword'>$1</span>$2<span") .replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span") .replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3") .replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1") .replace(/!important/ig, "<mark class='important'>!important</mark>") .replace(/<!(doctype)(.*)>/ig, "<span class='doctype'><!$1$2></span>") .replace(/@<span class='attribute'>(import|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1") .replace(/(@(import|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>") .replace(/<span class='bracket'>\[<\/span>(.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>") ).find('.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contents().unwrap(); $this.wrapInner('<div class="selectable"></div>'); $this.append('<div class="the-num"></div>'); // Insert the line number var num = $this.html().split(/\n|<br>/).length, count = 0; for (var i = 0; i < num; i++) { count = count + 1; $this.find('.the-num').append(count + '.<br/>'); } $this.css('padding-left', $this.find('.the-num').outerWidth()+14); }).attr('title', 'Klik ganda untuk menyeleksi semua kode!').find('.selectable').on("dblclick", function() { var refNode = $(this)[0]; if ($.browser.msie) { var range = document.body.createTextRange(); range.moveToElementText(refNode); range.select(); } else if ($.browser.mozilla || $.browser.opera) { var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(refNode); selection.removeAllRanges(); selection.addRange(range); } else if ($.browser.safari) { var selection = window.getSelection(); selection.setBaseAndExtent(refNode, 0, refNode, 1); } }); });
body { background-color:#E7E5DC; padding:50px; } pre { background-color:white; color:#069; padding:0em 1em; overflow:auto; white-space:pre; word-wrap:normal; font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important; position:relative; margin:0 0 1em; } pre .the-num { position:absolute; top:0; bottom:0; left:0; padding:0 1em; color:#999; background-color:#eee; border-right:2px solid #ccc; } pre .bracket {color:darkblue;} pre .tag, pre .tag .keyword, pre .tag .attribute {color:blue;} pre .selector {color:blue;} pre .attribute, pre .regexp {color:darkorange;} pre .str {color:green;} pre .tag .str {color:brown;} pre .keyword {color:darkred;} pre .comment {font-style:italic;color:#999;} pre .num, pre .hex {color:darkviolet;} pre .name, pre .important, pre .array {color:red;} pre .important {background-color:yellow;} pre .doctype {color:magenta;}
<pre><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample Page</title> </head> <body class="init"> <!-- top navigation --> <nav id="navigation"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> <!-- Funky Syntax Highlighter Experiment by Taufik Nurrohman WARNING: THIS REGEX IS TOO SIMPLE AND INACURRATE!!! --> </nav> </body> </html></pre> <pre>/** * Multiline comments * Lorem ipsum dolor sit amet... * TADA!!! */ table[border="1"] { border-collapse:collapse; margin:10px; } table[border="1"], table[border="1"] th, table[border="1"] td { border:1px solid #bbb; padding:2px 7px; } td { vertical-align:top; } table[border="1"] th { background-color:#fafafa; font-weight:700; text-align:left; } .full, table.full { width:96.8%; } table.config { background-color:#FFF0A0; } table.config td, table.config th { border-color:#333; } table.config th { background-color:#333; color:white; } #comments { padding:20px 30px 30px; margin:0 2%; background-color:#2f2f2f; border:2px solid #666; box-shadow:inset 0 0 7px black; color:white; } #comments .note, #comments em[rel="note"] { display:block; padding:5px 10px; border:1px solid black; background-color:#222; background-image:linear-gradient(top,#333,#222); box-shadow:0 0 0 1px #555; color:#ccc; font:normal 11px Tahoma,Arial,Sans-Serif; text-shadow:0 1px 0 black; } #comments .note a, #comments .note code { font-size:11px; } #comments img.incomment { display:block; margin:2px auto 0; } #comments blockquote img.incomment { display:block; margin:2px auto 0 !important; } #comments a { color:#5687B8; } #comments a.allow, #comments i[rel="anchor"] { font-size:97%; } #comments i[rel="pre"] { display:block; font:normal 12px Monaco,"Courier New",Courier,monospace !important; padding:0.5em 0.5em 0.5em 1em; background-color:#002b36; border-left:4px solid #268bd2; position:relative; overflow:auto; white-space:pre; word-wrap:normal !important; } #comments code, #comments i[rel="code"] { color:white; font:normal 12px Monaco,'Courier New',Monospace; } #comments code a { color:white; } #comments code a:hover { background:transparent; } #comments i[rel="image"] { display:block; margin:2px auto; width:50px; height:50px; border:5px solid #222; overflow:hidden; position:relative; } #comments i[rel="image"]:before { content:""; background:white url('http://hompimpa.googlecode.com/svn/trunk/images/loading.gif') no-repeat 50% 50%; position:absolute; top:0; right:0; bottom:0; left:0; } #comments iframe.video { width:320px; max-width:320px; height:224px; box-shadow:0 1px 3px black; display:block; margin:10px auto 10px; border:4px solid #444; background-position:50% 50%; } #discussionFrame { border:4px solid #333; box-shadow:0 1px 3px black; } #recentPostsLoader { overflow:hidden; } .framePreloader iframe { border:none; width:100%; } #comments h4 { color:white; margin:0 0 10px; } #cm_block .no-js:target .cm_entry {border:2px solid yellow !important;} #cm_block .no-js:target .avatar-image-container {padding:0;border:5px solid yellow !important;}</pre> <pre>function framePreloader(frame, url, h) { $(frame).html('<iframe src="' + url + '" height="' + h + '" frameborder="0" width="100%"></iframe>'); } function frameReloader(triggerParent, title, target, url, h, text) { $(triggerParent).append(' - <a href="#">' + title + '</a>'); $('a', triggerParent).on("click", function() { $(target).html('<iframe width="100%" src="' + url + '" height="' + h + '"></iframe>'); $('#loadingtext').html('<span>' + text + '</span>'); $('iframe').load(function() { $('#loadingtext span').remove(); }); return false; }); } $(window).bind("load", function() { framePreloader('#discussionFrame', 'comm-frame.html', '770'); framePreloader('#fbLikeFrame', 'http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FHompimpa-Alaihum-Gambreng%2F298981640118767&width=250&colorscheme=dark&show_faces=true&border_color=%233c3c3c&stream=false&header=false&height=288', '288'); framePreloader('#recentPostsLoader', 'postingterbaru.html', '420'); // Fix Bug! if(window.location.hash) { var urlHash = window.location.href.split('#')[1]; $('html, body').animate({ scrollTop: $('.' + urlHash).offset().top - 30 }, 4000, function() { $('.' + urlHash).find('div.cm_entry').css('border', '2px solid yellow'); $('.' + urlHash).find('div.avatar-image-container').css({ 'padding': '0px', 'border': '5px solid yellow' }); }); } });</pre>