Highlighter Language Autodetection

CSS HTML Javascript jQuery sitemap Trik

Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Syntax Highlighter Language Autodetection ini di blog anda.

jika sebelumnya anda sudah pernah memasang Syntax Highlighter sebaiknya css dan jsnya di pindahkan dulu agar tidak ada masalah nantinya. langsung saja

Struktur penggunaannya agar berbeda dari Syntax Highlighter yang pernah anda gunakan setiap bahasa memiliki kelas berbeda. coba lihat di bawah ini

    Java Script  ⇒ data-codetype="JavaScript" , code class="Javascript"
    HTML ⇒ data-codetype="HTML" , code class="HTML"
    JQuery ⇒ data-codetype="JQuery" , code class="JQuery"
    XML ⇒ data-codetype="XML" , code class="XML"
    CSS  ⇒ data-codetype="CSS" , code class="CSS"

Cara pemasangan Syntax Highlighter Language Autodetection

silahkan masuk ke editor Template kemudian pilih Edit HTML, copy css berikut

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-7677code-line:1-7778code-line:1-7879code-line:1-7980code-line:1-8081code-line:1-8182code-line:1-8283code-line:1-8384code-line:1-8485code-line:1-8586code-line:1-8687code-line:1-8788code-line:1-8889code-line:1-8990code-line:1-9091code-line:1-9192code-line:1-9293code-line:1-9394code-line:1-9495code-line:1-9596code-line:1-9697code-line:1-9798code-line:1-9899code-line:1-99100code-line:1-100101code-line:1-101102code-line:1-102103code-line:1-103104code-line:1-104105code-line:1-105106code-line:1-106107code-line:1-107108code-line:1-108109code-line:1-109110code-line:1-110111code-line:1-111112code-line:1-112113code-line:1-113114code-line:1-114115code-line:1-115116code-line:1-116117code-line:1-117118code-line:1-118119code-line:1-119120code-line:1-120121code-line:1-121122code-line:1-122123code-line:1-123124code-line:1-124125code-line:1-125126code-line:1-126127code-line:1-127128code-line:1-128129code-line:1-129130code-line:1-130131code-line:1-131132code-line:1-132133code-line:1-133134code-line:1-134135code-line:1-135136code-line:1-136137code-line:1-137138code-line:1-138139code-line:1-139140code-line:1-140141code-line:1-141142code-line:1-142143code-line:1-143144code-line:1-144145code-line:1-145146code-line:1-146147code-line:1-147148code-line:1-148149code-line:1-149150code-line:1-150151code-line:1-151152code-line:1-152153code-line:1-153154code-line:1-154155code-line:1-155156code-line:1-156157code-line:1-157158code-line:1-158159code-line:1-159160code-line:1-160161code-line:1-161162code-line:1-162163code-line:1-163164code-line:1-164165code-line:1-165166code-line:1-166167code-line:1-167168code-line:1-168169code-line:1-169170code-line:1-170171code-line:1-171172code-line:1-172173code-line:1-173174code-line:1-174175code-line:1-175pre,i[rel="pre"]{
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}
pre:hover,i[rel="pre"]:hover {
background-color: #DDE0E7
}
pre code{
display:block;
color:#111;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
letter-spacing:0;
white-space:pre
}
pre[rel="HTML"],pre[data-codetype="HTML"]{
border-left-color:#0B7E88
}
pre[rel="CSS"],pre[data-codetype="CSS"]{
border-left-color:#5DA028
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{
border-left-color:#40627E
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{
border-left-color:#40627E
}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{
border-left-color:#40627E
}
pre[rel="XML"],pre[data-codetype="XML"]{
border-left-color:#C44032
}
pre[rel*="+"],pre[data-codetype*="+"]{
border-left-color:#0B7E88
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{
color:#00BB4B;font-style:italic
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{
color:#859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{
color:#A60A0A
}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{
color:#103197
}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{
font-weight:bold
}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{
color:#0499D3
}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{
color:#cb4b16
}
pre .deletion{
color:#dc322f
}
pre .tex .formula{
background:#073642
}
pre.numbered{
border-left-width:2px;
padding-left:1em
}
pre .line-number,pre.numbered code{
display:block;
line-height:16px
}
pre .line-number{
float:left;
margin:0 1em 0 -1em;
color:#586E75;
border-right:2px solid #9B9DA1;
text-align:right;
min-width:35px
}
pre .line-number span{
display:block;
position:relative;
padding:0 .5em 0 1em
}
pre .line-number span:nth-child(even){
background-color:#FAFAFA
}
pre .line-number span em{
position:absolute;
bottom:-1px;
left:100%;
background-color:red;
padding:0 2px 1px 2px;
border:1px solid black;
font-style:normal;
color:black;
display:none
}
pre .line-number span:hover em{
display:block
}
pre .line-number span:target a{
display:block;
color:white;
position:relative;
background-color:#268bd2;
margin:0 -.5em 0 -1em;
padding:0 .5em 0 0
}
pre.numbered code span{
line-height:12px
}
pre[data-codetype="HTML"] .line-number span:target a{
background-color:#4584BE
}
pre[data-codetype="CSS"] .line-number span:target a{
background-color:#5DA028
}
pre[data-codetype="JavaScript"] .line-number span:target a{
background-color:#bbbbbb
}
pre[data-codetype="JQuery"] .line-number span:target a{
background-color:#7073CF
}
pre[data-codetype="JQuery UI"] .line-number span:target a{
background-color:#E36B23
}
pre[data-codetype="XML"] .line-number span:target a{
background-color:#C44032
}
pre[data-codetype*="+"] .line-number span:target a{
background-color:#0B7E88
}
pre[rel],pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: static;
top: 0;
right: 0;
left: 0;
background-color: #666;
padding: 5px 7px;
margin: -5px -6px 0px -12px;
font: bold 11px/20px Arial,Sans-Serif;
color: white;
}
pre[rel="CSS"],pre[data-codetype="CSS"]:before {
background-color: #5DA028;
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="HTML"],pre[data-codetype="HTML"]:before {
background-color: #0B7E88;
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"],pre[data-odetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="XML"],pre[data-codetype="XML"]:before {
background-color: #E55E48;
}
pre[data-codetype*="+"]:before {
background-color: #0B7E88;
}
pre .line-number span:target:before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden
} 

silahkan letakkan CSS di atas tepat diatas kode </style> atau ]]></b:skin>  pada template anda

kemudian silahkan letakkan kode di bawah ini di atas kode </body>

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-13<script type="text/javascript">//<![CDATA[
/*
Syntax highlighting with language autodetection.
http://softwaremaniacs.org/soft/highlight/
*/

function autoSelect(a){var b,range;if(window.getSelection){b=window.getSelection();range=document.createRange();range.selectNodeContents(a);b.removeAllRanges();b.addRange(range)}else if(document.selection){b=document.selection.createRange().text;range=document.body.createTextRange();range.moveToElementText(a);range.select()}}function makeNumber(){var a=document.getElementsByTagName('pre'),pl=a.length;for(var i=0;i<pl;i++){if(/(^| )numbered( |$)/.test(a[i].className)){a[i].innerHTML='<span class="line-number"></span>'+a[i].innerHTML+'<span class="cl"></span>'}}for(var j=0;j<pl;j++){if(a[j].getElementsByTagName('span')[0]&&a[j].getElementsByTagName('span')[0].className=='line-number'){var b=a[j].getElementsByTagName('code')[0].innerHTML.split(/\n/).length,line=a[j].getElementsByTagName('span')[0];for(var k=0;k<b;k++){line.innerHTML+='<span id="line-'+(j+1)+'-'+(k+1)+'"><em>line-'+(j+1)+'-'+(k+1)+'</em><a href="#line-'+(j+1)+'-'+(k+1)+'">'+(k+1)+'</a></span>'}}}var code=document.getElementsByTagName('code'),clen=code.length;for(var i=0;i<clen;i++){code[i].ondblclick=function(){autoSelect(this);if(document.getElementById('tt-search')){document.getElementById('tt-search').style.display="none"}}}}

var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return RegExp(q,"m"+(r.cI?"i":"")+(p?"g":""))}function j(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"||q.nodeName=="SPAN"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}function g(t,s){var r="";for(var q=0;q<t.childNodes.length;q++){if(t.childNodes[q].nodeType==3){var p=t.childNodes[q].nodeValue;if(s){p=p.replace(/\n/g,"")}r+=p}else{if(t.childNodes[q].nodeName=="BR"){r+="\n"}else{r+=g(t.childNodes[q])}}}if(/MSIE [678]/.test(navigator.userAgent)){r=r.replace(/\r/g,"\n")}return r}function a(s){var q=s.className.split(/\s+/);q=q.concat(s.parentNode.className.split(/\s+/));for(var p=0;p<q.length;p++){var r=q[p].replace(/^language-/,"");if(d[r]||r=="no-highlight"){return r}}}function b(p){var q=[];(function(s,t){for(var r=0;r<s.childNodes.length;r++){if(s.childNodes[r].nodeType==3){t+=s.childNodes[r].nodeValue.length}else{if(s.childNodes[r].nodeName=="BR"){t+=1}else{q.push({event:"start",offset:t,node:s.childNodes[r]});t=arguments.callee(s.childNodes[r],t);q.push({event:"stop",offset:t,node:s.childNodes[r]})}}}return t})(p,0);return q}function l(y,z,x){var r=0;var w="";var t=[];function u(){if(y.length&&z.length){if(y[0].offset!=z[0].offset){return(y[0].offset<z[0].offset)?y:z}else{return z[0].event=="start"?y:z}}else{return y.length?y:z}}function s(C){var D="<"+C.nodeName.toLowerCase();for(var A=0;A<C.attributes.length;A++){var B=C.attributes[A];D+=" "+B.nodeName.toLowerCase();if(B.nodeValue!=undefined&&B.nodeValue!=false&&B.nodeValue!=null){D+='="'+m(B.nodeValue)+'"'}}return D+">"}while(y.length||z.length){var v=u().splice(0,1)[0];w+=m(x.substr(r,v.offset-r));r=v.offset;if(v.event=="start"){w+=s(v.node);t.push(v.node)}else{if(v.event=="stop"){var q=t.length;do{q--;var p=t[q];w+=("</"+p.nodeName.toLowerCase()+">")}while(p!=v.node);t.splice(q,1);while(q<t.length){w+=s(t[q]);q++}}}}w+=x.substr(r);return w}function i(){function p(u,t,v){if(u.compiled){return}if(!v){u.bR=c(t,u.b?u.b:"\\B|\\b");if(!u.e&&!u.eW){u.e="\\B|\\b"}if(u.e){u.eR=c(t,u.e)}}if(u.i){u.iR=c(t,u.i)}if(u.r==undefined){u.r=1}if(u.k){u.lR=c(t,u.l||hljs.IR,true)}for(var s in u.k){if(!u.k.hasOwnProperty(s)){continue}if(u.k[s]instanceof Object){u.kG=u.k}else{u.kG={keyword:u.k}}break}if(!u.c){u.c=[]}u.compiled=true;for(var r=0;r<u.c.length;r++){p(u.c[r],t,false)}if(u.starts){p(u.starts,t,false)}}for(var q in d){if(!d.hasOwnProperty(q)){continue}p(d[q].dM,d[q],true)}}function e(J,D){if(!i.called){i();i.called=true}function z(r,M){for(var L=0;L<M.c.length;L++){if(M.c[L].bR.test(r)){return M.c[L]}}}function w(L,r){if(C[L].e&&C[L].eR.test(r)){return 1}if(C[L].eW){var M=w(L-1,r);return M?M+1:0}return 0}function x(r,L){return L.iR&&L.iR.test(r)}function A(O,N){var M=[];for(var L=0;L<O.c.length;L++){M.push(O.c[L].b)}var r=C.length-1;do{if(C[r].e){M.push(C[r].e)}r--}while(C[r+1].eW);if(O.i){M.push(O.i)}return c(N,"("+M.join("|")+")",true)}function s(M,L){var N=C[C.length-1];if(!N.t){N.t=A(N,H)}N.t.lastIndex=L;var r=N.t.exec(M);if(r){return[M.substr(L,r.index-L),r[0],false]}else{return[M.substr(L),"",true]}}function p(O,r){var L=H.cI?r[0].toLowerCase():r[0];for(var N in O.kG){if(!O.kG.hasOwnProperty(N)){continue}var M=O.kG[N].hasOwnProperty(L);if(M){return[N,M]}}return false}function F(M,O){if(!O.k){return m(M)}var N="";var P=0;O.lR.lastIndex=0;var L=O.lR.exec(M);while(L){N+=m(M.substr(P,L.index-P));var r=p(O,L);if(r){t+=r[1];N+='<span class="'+r[0]+'">'+m(L[0])+"</span>"}else{N+=m(L[0])}P=O.lR.lastIndex;L=O.lR.exec(M)}N+=m(M.substr(P,M.length-P));return N}function K(r,M){if(M.sL&&d[M.sL]){var L=e(M.sL,r);t+=L.keyword_count;return L.value}else{return F(r,M)}}function I(M,r){var L=M.cN?'<span class="'+M.cN+'">':"";if(M.rB){q+=L;M.buffer=""}else{if(M.eB){q+=m(r)+L;M.buffer=""}else{q+=L;M.buffer=r}}C.push(M);B+=M.r}function E(O,L,Q){var R=C[C.length-1];if(Q){q+=K(R.buffer+O,R);return false}var M=z(L,R);if(M){q+=K(R.buffer+O,R);I(M,L);return M.rB}var r=w(C.length-1,L);if(r){var N=R.cN?"</span>":"";if(R.rE){q+=K(R.buffer+O,R)+N}else{if(R.eE){q+=K(R.buffer+O,R)+N+m(L)}else{q+=K(R.buffer+O+L,R)+N}}while(r>1){N=C[C.length-2].cN?"</span>":"";q+=N;r--;C.length--}var P=C[C.length-1];C.length--;C[C.length-1].buffer="";if(P.starts){I(P.starts,"")}return R.rE}if(x(L,R)){throw"Illegal"}}var H=d[J];var C=[H.dM];var B=0;var t=0;var q="";try{var v=0;H.dM.buffer="";do{var y=s(D,v);var u=E(y[0],y[1],y[2]);v+=y[0].length;if(!u){v+=y[1].length}}while(!y[2]);if(C.length>1){throw"Illegal"}return{r:B,keyword_count:t,value:q}}catch(G){if(G=="Illegal"){return{r:0,keyword_count:0,value:m(D)}}else{throw G}}}function f(t){var r={keyword_count:0,r:0,value:m(t)};var q=r;for(var p in d){if(!d.hasOwnProperty(p)){continue}var s=e(p,t);s.language=p;if(s.keyword_count+s.r>q.keyword_count+q.r){q=s}if(s.keyword_count+s.r>r.keyword_count+r.r){q=r;r=s}}if(q.language){r.second_best=q}return r}function h(r,q,p){if(q){r=r.replace(/^((<[^>]+>|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"<br>")}return r}function o(u,x,q){var y=g(u,q);var s=a(u);if(s=="no-highlight"){return}if(s){var w=e(s,y)}else{var w=f(y);s=w.language}var p=b(u);if(p.length){var r=document.createElement("pre");r.innerHTML=w.value;w.value=l(p,b(r),y)}w.value=h(w.value,x,q);var t=u.className;if(!t.match("(\\s|^)(language-)?"+s+"(\\s|$)")){t=t?(t+" "+s):s}if(/MSIE [678]/.test(navigator.userAgent)&&u.tagName=="CODE"&&u.parentNode.tagName=="PRE"){var r=u.parentNode;var v=document.createElement("div");v.innerHTML="<pre><code>"+w.value+"</code></pre>";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p<r.length;p++){var q=j(r[p]);if(q){o(q,hljs.tabReplace)}}makeNumber()}function n(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",k,false);window.addEventListener("load",k,false)}else{if(window.attachEvent){window.attachEvent("onload",k)}else{window.onload=k}}}var d={};this.LANGUAGES=d;this.highlight=e;this.highlightAuto=f;this.fixMarkup=h;this.highlightBlock=o;this.initHighlighting=k;this.initHighlightingOnLoad=n;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="\\b(0x[A-Za-z0-9]+|\\d+(\\.\\d+)?)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.inherit=function(p,s){var r={};for(var q in p){r[q]=p[q]}if(s){for(var q in s){r[q]=s[q]}}return r}}();hljs.LANGUAGES.javascript={dM:{k:{keyword:{"in":1,"if":1,"for":1,"while":1,"finally":1,"var":1,"new":1,"function":1,"do":1,"return":1,"void":1,"else":1,"break":1,"catch":1,"instanceof":1,"with":1,"throw":1,"case":1,"default":1,"try":1,"this":1,"switch":1,"continue":1,"typeof":1,"delete":1},literal:{"true":1,"false":1,"null":1}},c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM,hljs.CNM,{b:"("+hljs.RSR+"|case|return|throw)\\s*",k:{"return":1,"throw":1,"case":1},c:[hljs.CLCM,hljs.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",c:[{b:"\\\\/"}]}],r:0},{cN:"function",b:"\\bfunction\\b",e:"{",k:{"function":1},c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM]}]}]}};hljs.LANGUAGES.css=function(){var a={cN:"function",b:hljs.IR+"\\(",e:"\\)",c:[{eW:true,eE:true,c:[hljs.NM,hljs.ASM,hljs.QSM]}]};return{cI:true,dM:{i:"[=/|']",c:[hljs.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:{"font-face":1,page:1}},{cN:"at_rule",b:"@",e:"[{;]",eE:true,k:{"import":1,page:1,media:1,charset:1},c:[a,hljs.ASM,hljs.QSM,hljs.NM]},{cN:"tag",b:hljs.IR,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[hljs.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[a,hljs.NM,hljs.QSM,hljs.ASM,hljs.CBLCLM,{cN:"hexcolor",b:"\\#[0-9A-F]+"},{cN:"important",b:"!important"}]}}]}]}]}}}();hljs.LANGUAGES.xml=function(){var b="[A-Za-z0-9\\._:-]+";var a={eW:true,c:[{cN:"attribute",b:b,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,dM:{c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style",e:">",k:{title:{style:1}},c:[a],starts:{cN:"css",e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script",e:">",k:{title:{script:1}},c:[a],starts:{cN:"javascript",e:"<\/script>",rE:true,sL:"javascript"}},{cN:"vbscript",b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ />]+"},a]}]}}}();hljs.LANGUAGES.java={dM:{k:{"false":1,"synchronized":1,"int":1,"abstract":1,"float":1,"private":1,"char":1,"interface":1,"boolean":1,"static":1,"null":1,"if":1,"const":1,"for":1,"true":1,"while":1,"long":1,"throw":1,strictfp:1,"finally":1,"protected":1,"extends":1,"import":1,"native":1,"final":1,"implements":1,"return":1,"void":1,"enum":1,"else":1,"break":1,"transient":1,"new":1,"catch":1,"instanceof":1,"byte":1,"super":1,"class":1,"volatile":1,"case":1,assert:1,"short":1,"package":1,"default":1,"double":1,"public":1,"try":1,"this":1,"switch":1,"continue":1,"throws":1},c:[{cN:"javadoc",b:"/\\*\\*",e:"\\*/",c:[{cN:"javadoctag",b:"@[A-Za-z]+"}],r:10},hljs.CLCM,hljs.CBLCLM,hljs.ASM,hljs.QSM,{cN:"class",b:"(class |interface )",e:"{",k:{"class":1,"interface":1},i:":",c:[{b:"(implements|extends)",k:{"extends":1,"implements":1},r:10},{cN:"title",b:hljs.UIR}]},hljs.CNM,{cN:"annotation",b:"@[A-Za-z]+"}]}};hljs.LANGUAGES.php={cI:true,dM:{k:{and:1,include_once:1,list:1,"abstract":1,global:1,"private":1,echo:1,"interface":1,as:1,"static":1,endswitch:1,array:1,"null":1,"if":1,endwhile:1,or:1,"const":1,"for":1,endforeach:1,self:1,"var":1,"while":1,isset:1,"public":1,"protected":1,exit:1,foreach:1,"throw":1,elseif:1,"extends":1,include:1,__FILE__:1,empty:1,require_once:1,"function":1,"do":1,xor:1,"return":1,"implements":1,parent:1,clone:1,use:1,__CLASS__:1,__LINE__:1,"else":1,"break":1,print:1,"eval":1,"new":1,"catch":1,__METHOD__:1,"class":1,"case":1,exception:1,php_user_filter:1,"default":1,die:1,require:1,__FUNCTION__:1,enddeclare:1,"final":1,"try":1,"this":1,"switch":1,"continue":1,endfor:1,endif:1,declare:1,unset:1,"true":1,"false":1,namespace:1},c:[hljs.CLCM,hljs.HCM,{cN:"comment",b:"/\\*",e:"\\*/",c:[{cN:"phpdoc",b:"\\s@[A-Za-z]+",r:10}]},hljs.CNM,hljs.inherit(hljs.ASM,{i:null}),hljs.inherit(hljs.QSM,{i:null}),{cN:"variable",b:"\\$[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*"},{cN:"preprocessor",b:"<\\?php",r:10},{cN:"preprocessor",b:"\\?>"}]}};

hljs.tabReplace = '    ';
hljs.initHighlightingOnLoad();
//]]></script> 

atau untuk lebih praktisnya letakkan kode ini di atas kode </head>

<script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'/> 

simpan apa yang tadi sudah di kerjakan.

Untuk menggunakannya, silahkan pastekan kode di bawah ini pada tab HTML di postingan ketika membuat postingan.

1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-6<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery ... </code></pre> 

sekarang tinggal lihat hasilnya, anda sudah memiliki Syntax Highlighter Language Autodetection di blog anda, sekian saja semoga bermanfaat...

Artikel Terkait

  • Background posting berbeda - beda di homepage
    buat sobat yang sedang mencari trik atau cara untuk membuat tampilan posting tampil dengan warna background yang berbeda beda di setiap lebel dan halaman depan blog saja dan suka dengan tampilan seperti ini bisa menggunakan trik mudah berikut ini. caranya pun juga cukup mudah, silahkan buka editor template blog sobat lalu cari kode </head&…
  • Sidebar Menu Accordion jQuery
    Apa fungsi menu accordion? Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat se…
  • Membuat current page pada menu navigasi
    Current page atau Current menu adalah sebuah fungsi dimana di posisikan sebagai penanda halaman aktif pada menu navigasi yang sedang di buka atau di kunjungi, misalkan pada link menu navigasi Contact, maka link pada menu navigasi Contact yang akan di beri penanda berbeda dari link menu navigasi lainnya. biar sobat tidak bingung langsung saja l…
  • Show hide related post (perbaharuan)
    Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya... kira kira nanti hasilnya akan seperti berikut ini jika sobat ingin menerapkan trik s…
  • jQuery Show Hide Checkboxes
    Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQu…
  • Memasang total post dan total comment
    Mungkin ini bukan trik baru, tapi saya coba terapakan kembali sedikit trik lama ini untuk menambah keunikan di dalam tampilan blog saya. memasang total post dan total comment bukan hal yang sulit, karena kita hanya perlu menggunakan sedikit script. script yang di gunakan seperti di bawah ini: Script untuk Total Posts <script style="text/j…

11 komentar

  1. jadi lebih memahami si pembaca ya mas, untuk kode2nya

    BalasHapus
    Balasan
    1. iya lebih mudah mncari kode di dalam baris tertentu...

      Hapus
  2. Wahh kode nya lumayan juga ya mass :D
    puanjang bingitss

    BalasHapus
  3. kalau kaya punya mastah gmna caranya....

    BalasHapus
  4. aku mau yang kaya punya mas ini, kalau line-numbernya di klik, otomatis linenya lengket dengan header

    BalasHapus
  5. cocok buat blog tutorial ya mas,, :)

    BalasHapus
  6. maaf gan mau tanya, kalau biar judul Kode (CSS, JavaS, HTML dan lain") biar backgroundnya lebarnya mengikuti ( penuh sesuai overflow ) caranya gimana ya gan? mohon bantuannya

    BalasHapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...