syn

Edit in JSFiddle

• JavaScript
• HTML
• CSS
• Result

JavaScript HTML CSS Result

// JQuery Syntax Highlighter DB
$(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)",
            repli1 = new RegExp(list + " ", "ig"),
            repli2 = new RegExp(list + "( ?)<span", "ig"),
            $this = $(this);
        $this.html($this.html()
        .replace(/(<br>|\n)$/ig, "")
        .replace(/(\t)/ig, "    ")
        .replace(/&quot;/ig, "\"")
        .replace(/&#39;|&apos;/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+(?!(.*&lt;)))/g, "<span class='num'>$1</span>")
        .replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
        .replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>")
        .replace(/&lt;(.*?)&gt;/g, "<span class='tag'>&lt;$1&gt;</span>")
        .replace(/&lt;!--([\s\S]*?)--&gt;/gm, "<span class='comment'>&lt;!--$1--&gt;</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(repli1, "<span class='keyword'>$1</span> ")
        .replace(repli2, "<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(/&lt;!(doctype)(.*)&gt;/ig, "<span class='doctype'>&lt;!$1$2&gt;</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.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);

    });
});

<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Contoh Halaman&lt;/title&gt;
&lt;/head&gt;
&lt;body class="init"&gt;
&lt;nav id="navigation"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

&lt;/nav&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<pre>
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('&lt;iframe src="' + url + '" height="' + h + '" frameborder="0" width="100%"&gt;&lt;/iframe&gt;');
}

function frameReloader(triggerParent, title, target, url, h, text) {
    $(triggerParent).append(' - &lt;a href="#"&gt;' + title + '&lt;/a&gt;');
    $('a', triggerParent).on("click", function() {
        $(target).html('&lt;iframe width="100%" src="' + url + '" height="' + h + '"&gt;&lt;/iframe&gt;');
        $('#loadingtext').html('&lt;span&gt;' + text + '&lt;/span&gt;');
        $('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&amp;width=250&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%233c3c3c&amp;stream=false&amp;header=false&amp;height=288', '288');
    framePreloader('#recentPostsLoader', 'postingterbaru.html', '420');

    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>

body {
  background-color:#E7E5DC;
  padding:50px;
}

pre {
  background-color:#eee;
  color:#069;
  padding:0.5em 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.5em 0.5em 0.5em 1em;
  color:#555;
  background-color:#ccc;
  border-right:2px solid #444;
}

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;}