kali ini, saya akan berbagi cara mudah untuk memasang Syntax Highlighter yang terbilang mudah ringan dan baik. untuk mengikuti pemasangan pada blog anda silahkan simak di bawah ini langkahnya:
1. Masuk Blogger
2. Pilih template dan Edit
3. Masukan kode CSS dibawah ini diatas kode </style>
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;}4. Letakkan kode berikut di atas kode
<script type='text/javascript'>
// JQuery Syntax Highlighter
$(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(/"/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(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(/<!(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.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);
});
});
</script>5. Simpan perubahan
6. Untuk memanggil di dalam posting, gunakan cara penulisan seperi berikut
<pre> ...kode disini... </pre>jika langkah anda benar, maka hasilnya akan terlihat seperti di bawah ini:
semoga sukses dan bermanfaat...
