Cara membuat syntax highlighter di blog versi 2

Assalamualaikum wr wb

     Kembali lagi dengan bang sholeh, kali ini bang sholeh akan sedikit berbagi bagaimana cara membuat syntax highlighter di blog. dikarenakan banyak yang komplain masalah ini bang sholeh akan menjawabnya. muncul pertanyaan :" Men gue nyoba-nyoba kok gagal terus ya "
Bang sholeh menjawab : "

bang lundy ::Justru dari kegagalan itu kita bisa belajar bang..heheehehe

kalau menurut saya tergantung template anda bang....punya ane lagi juga kagak bisa setelah ganti template..
tapi mau tak coba lagi bang..
sekarang bisa tuh syntax hihgligternya bang...
Semangat-semangat..????

wkwkwkwkwkwk

Oke langsung saja ke TKP :

Cara pemasangannya silahkan ikuti tutorial dibawah ini:

1. Masuk Blogger
2. Pilih template dan Edit HTML
3. Masukan kode CSS dibawah ini diatas kode ]]></b:skin> atau </style>

pre,i[rel="pre"] {

padding:.8em 1em;

margin:0;

background-color:#2f3741;

border-left:4px solid #40627E;

font-size:11px;

color:#839496;

font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;

line-height:1.4em;

position:relative;

white-space: pre;

word-wrap: normal;

white-space:pre;

overflow:auto

}

pre.line-number {

background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;

padding-left:54px;

border-left:none;

}

pre.line-number:after{

content:"";

width:35px;

height:8px;

background-color:#39424e;

bottom:0;

left:0;

position:absolute;

}

pre[data-codetype="CSS"]{border-left-color:#5fbbba}

pre[data-codetype="HTML"]{border-left-color:#4fc1eb}

pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}

pre[data-codetype="JQuery"]{border-left-color:#99c262}

pre.line-number[data-codetype]:before {

content:attr(data-codetype);

display:block;

margin:-11px -13px 10px -54px;

padding:8px 12px;

font-family:Oswald,Arial,Sans-serif;

font-size:12px;

text-transform:uppercase;

background-color:#41749f;

color:white

}

pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}

pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}

pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}

pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}

code {

font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;

font-size:13px;

color: #d14;

}

#comments code {

color:#bbbb6d;

}

pre code {

padding:0 !important;

color: #a3a49a;

background: none !important;

border:none !important;

display:block;

}

pre .line-number {

float:left;

margin:0 1em 0 -1em;

color:#61686d;

background-color:#39424e;

text-align:right;

min-width:2.5em;

padding-right:4px;

}

pre .comment,

pre .template_comment,

pre .diff .header,

pre .doctype,

pre .pi,

pre .lisp .string,

pre .javadoc {

color: #586e75;

font-style: italic;

}

pre .keyword,

pre .winutils,

pre .method,

pre .addition,

pre .css .tag,

pre .request,

pre .status,

pre .nginx .title {

color: #859900;

}

pre .number,

pre .command,

pre .string,

pre .tag .value,

pre .rules .value,

pre .phpdoc,

pre .tex .formula,

pre .regexp,

pre .hexcolor {

color: #7195a3;

}

pre .title,

pre .localvars,

pre .chunk,

pre .decorator,

pre .built_in,

pre .identifier,

pre .vhdl .literal,

pre .id,

pre .css .function {

color: #569dcf;

}

pre .attribute,

pre .variable,

pre .lisp .body,

pre .smalltalk .number,

pre .constant,

pre .class .title,

pre .parent,

pre .haskell .type {

color: #aa985a;

}

pre .preprocessor,

pre .preprocessor .keyword,

pre .shebang,

pre .symbol,

pre .symbol .string,

pre .diff .change,

pre .special,

pre .attr_selector,

pre .important,

pre .subst,

pre .cdata,

pre .clojure .title,

pre .css .pseudo {

color: #509a55;

}

pre .deletion {

color: #dc322f;

}

pre .tex .formula {



background: #073642;}

4. Cari Kode </head> dan pastekan kode dibawah ini tepat di atas kode tadi :

<script src='https://googledrive.com/host/0B8zY82qas755TXNaZ0FGWUVPSEE' type='text/javascript'/>

<script>hljs.initHighlightingOnLoad();

</script>

5.UntukMengaktifkan tag pre pada komentar silahkan tambahkan diatas kode </body>

<script type='text/javascript'>

$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {

    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);

});

</script>

6. Simpan Template
Cara penggunaan Syntax Highlighter simple dan mudah

<pre><code>...-kode HTML, CSS, JavaSript di Sini-..</code></pre>

Bila ingin menggunakan syntax highligter dengan tampilan berbeda,kunjungi link ini aje : DISINI

Sumber : https://sites.google.com/site/informasiterbarusekali/cara-membuat-syntax-highlighter

SEMOGA BERMANFAAT !