Cara Memasang Syintax Highlighter Keren

Cara Memasang Syintax Highlighter Keren - Syntax hightlighter biasanya digunakan dalam hal menaruh HTML, CSS, maupun JQUERY dalam postingan blog. selain itu, Syntax juga akan mempercantik postingan blog dengan penuh warna dan penomoran serta label diatas Syntax itu.
Postingan pada blog akan lebih menarik dan lebih professional dibandingkan dengan yg tidak menggunakan Syntax.

Untuk lebih mayakinkan, anda bisa melihat Demonya dibawah ini

Demo

Nah itu adalah Demonya. sedikit cuplikannya saja. bagaimana? anda tertarik memasang Syntax?

kalau begitu ikuti langkah langkah dibawah ini

Langkah Pemasangan

Masuk dulu ke blogger
Pilih blog yang mau ditambahkan Syntac
Pilih menu Template > Edit HTML
Tambahkan CSS dibawah ini diatas Kode ]]></b:skin>

 /* Syntax Highlghter --------- */

  pre {padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:13px;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-wrap;word-wrap: normal;}

  pre.line-number {background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBbxkGc750ztxiPDmRRplBnmG9Tetxq6uaRDi_DRwBiyOu0yi4YG-DaTIjMUNiRwRJDddN9NBsGe0mnqJxHsuKnZNi8VsCgB7Svdp3yBQ0cNcpxQGNNusJNfuCOBYksHT31ljyPuYyiwg/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:14px;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;

}

Simpan JQuery dibawah ini tepat diatas kode </body>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Nah setelah itu. Simpan Template dan Selesai.

Cara penggunaan

Anda hanya menambahkan kode dibawah ini disetiap postingan anda

<pre class="line-number" data-codetype="CSS"><code> ....... </code></pre>
<pre class="line-number" data-codetype="Jquery"><code> ....... </code></pre>
<pre class="line-number" data-codetype="HTML"><code> ....... </code></pre>