Cara Membuat Syntax Highlighter pada Blogger

Sebelum kita membahas cara membuat syntax highlighter di blog ada baiknya kita mengenali dulu itu Syntax Highlighter? yaitu upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, dan masih banyak lagi. Biasanya para blogger menggunakan Blockquote untuk maneruh script pada postingan, Benar kan? kalau saya sarankan menggunakan syntax saja bro karena menurut saya syntax berguna agar script yang di bagikan di postingan menjadi menarik dan profesional, Bagaimana? Tertarik Menggunakan Syntax?

Langkah-langkah 

• Dasbor > Template > Edit HTML
• Tambahkan kode CSS ini tepat di atas ]]></b:skin>

/* Syntax Highlighter */ 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0cIYMoGpkfDDz6yBl_fHniDLLTCq0tSPyN1ifsHtEUxYwMvF9pWCFHHG60jBJUSIrngjY4tUGbBLk032mY3GmKfISNG8SxmPPCJP12usBBnwOF2MVIvjJouULZuFMDRCP2KakwhLWIM/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:#2DCFF2;font-style:italic} pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C} pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F} pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425} pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3} 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:#D94CEA} pre .deletion{color:#dc322f} pre .tex .formula{background:#073642}

• Kemudian tambahkan kode jQuery ini tepat diatas kode</body>

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

Cara penggunaan
Dan jangan lupa, postingan juga harus di mode Edit HTML bukan mode COMPOSE , Untuk menulis di postingan, gunakan kode seperti dibawah ini

<pre><code>...Masukan Kode Disini...</code></pre>

Sampai disini dulu tutorial Membuat  Syntax Highlighter blogger, Semoga tutorial ini bermanfaat bagi blog anda agar lebih profesional, terimakasih jangan lupa tingalkan komnntar ya

Share this post