Cara Membuat Syntax Highlighter #2

Syntax Highlighter adalah salah satu script yang dapat membuat kode menjadi warna-warni . Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten code.

Salah satu script yang dapat membuat kode menjadi warna-warni. Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script HTML, JavaScript, jQuery dan lain sebainya.

Selain memperindah tampilan barisan kode pada postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca dapat dengan mudah mengenal jenis kode yang disajikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya ialah, pengunjung akan merasa nyaman membaca sajian konten blog, dan bagi pengelola blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorialnya.

Dengan begitu, penggunaan Syntax Highlighter lebih cocok kepada blogger yang mengelola blogdengan niche yang terbatas dan sangat tidak cocok digunakan oleh blog yang hanya sekali-sekali menyajikan tutorial alias blog gado-gado, untuk itu bijaklah memilih dan memasang script di blog kita. Sebab, jika berlebihan maka akan berpengaruh terhadap loading blog.

Syntax Highlighter yang saya sajikan ini adalah hasil racikan dari Alex Gorbatchev yang kodenya ini juga dikenal dengan nama script Stabilo Syntacs. Syntax Highlighter adalah tools pengganti blockquote, mengingat tampilan blockquote yang tidak mendukung warna-warni untuk kode script, maka solusinya adalah menggunakan Syntax Highlighter ini. Jika anda tertarik untuk menggunakan Syntax Highlighter ini, silahkan ikuti caranya berikut.

Cara Memasang Syntax Highlighter di Blogger

• Masuk ke Dashboard Blogger.
• Letakkan kode di bawah ini tepat di atas kode </style> atau ]]></b:skin>

/* syntax highlighter iFly.id */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
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}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
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:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

• Setelah itu, cari kode </head> lalu letakkan kode di bawah ini tepat di atasnya.

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

• Simpan template

Cara Menggunakan Syntax Highlighter di Blogger

Untuk cara penggunaan Syntax Highlighter harus menggunakan HTML bukan Compose

<pre><code>
<--[Paste Code HTML, CSS, JavaScript, JQuery, dll. Disini]-->
</code></pre>

Demikian cara membuat Syntax Highlighter dan menggunakannya di blogger, semoga berhasil diterapkan di blog anda.