Membuat Syntax Highlighter

Syntax Highlighter adalah fitur editor teks yang digunakan untuk pemrograman, scripting, atau bahasa markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilah. Fitur ini memudahkan penulisan dalam bahasa terstruktur seperti bahasa pemrograman atau bahasa markup baik sebagai struktur dan kesalahan sintaks secara visual yang berbeda. Menyoroti tidak mempengaruhi makna teks itu sendiri; hal ini dimaksudkan hanya untuk pembaca manusia.sumber: Wikipedia.
Sekarang kita akan membuat Syntax Highlighter pada Blogger. Bagaimana caranya? Ikuti cara berikut.

Tahap 1 Tambahkan CSS

1. Masuk ke Blogger.
2. Pilih blog.
3. Klik Template Edit Html.
4. Cari kode ]]></b:skin> atau </style>
5. Pastekan kode berikut tepat diatasnya.

/* 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/AVvXsEggYmjoZivt93K_CGrF6Gq7JAPQYvcxQVascBFAMQU5D3wsO7dWVozJ6u49pqjn-QRJ6_cP-26o9-Rhp90wMYDwxnPJP-4h_L2EwKlc6FoDxWppHJVE3TAuhlWOm0jeZYpAl1fnLZsP6v0/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}

Tahap 2 Tambahkan Javascript

1. Cari kode </head> pada CTRL+F.
2. Pastekan kode ini tepat di atasnya.

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

Untuk mempublikasikan Syntax Highlighter, silakan ikuti tahap berikut.
1. Klik Pos.
2. Pilih Pos, atau buat entri baru.
3. Pilih Mode HTML.
Masukkan kode ini.

<pre><code>...Pastekan Kode Yang Ingin di Taruh...</code></pre>

...Pastekan kode yang ingin di taruh... adalah kode yang ingin mau di taruh.
4. Klik Publikasikan atau Simpan.
5. Well, Anda telah selesai :)

Cukup sekian dari tutorial cara membuat Syntax Highlighter. :D
Share untuk posting baru. :-d

sumber:FicriPebriyana