Syntax Highlighter Simple Untuk Blog

Syntax Highlighter biasanya memang dibutuhkan untuk blog - blog yang sering berbagi kode CSS, Javascript, HTML, PHP dll. Sebenarnya kita bisa saja menuliskan kode/membagikan sebuah kode secara langsung, maksudnya di copy paste ke halaman blog, tapi bila kode/script yang kita bagikan panjang, maka susunan kode yang kita bagikan tersebut pastinya akan terlihat berantakan dan membuat postingan blog menjadi terlalu panjang.

Supaya penulisan kode atau script yang kita bagikan terlihat lebih rapi dan tertata, maka kita memerlukan Syntax Highlighter. Untuk membuat Syntax Highlighter kita hanya perlu menambahkan susunan kode CSS ke template blog, kemudian juga sedikit tambahan Javascript yang bisa di hosting di Google Drive ataupun juga bisa kita hosting ke website yourjavascript.com. Caranya memang hampir sama seperti Cara Mudah Membuat Blok Warna Dalam Postingan Blog , hanya saja disini kita membutuhkan tambahan Javascript

Dibawah ini merupakan cara - cara untuk membuat Syntax Highlighter Simple Untuk Blog

Seperti biasa masuk ke menu Template > Edit HTML
Cari kode <b:skin><![CDATA[/* atau supaya lebih cepat tekan CTRL+F

Kemudian bila sudah ditemukan copy script dibawah ini dan taruh dibawahnya


/* syntax highlighter ROOT93 */
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}

Terakhir tambahkan script dibawah ini dibawah kode <head> atau sebelum kode </head>

<script src="http://yourjavascript.com/16724112645/root93.js" type="text/javascript">

Pada tahap ini pembuatan Syntax Highlighter sudah selesai, setiap kali ingin menuliskan sebuah kode CSS, HTML, PHP dll, maka Anda cukup beralih dari mode Compose ke mode HTML lalu masukan kode yang ingin Anda tambahkan/tampilkan didalam postingan blog kedalam tag berikut :

<pre><code> Disini masukan Kode, PHP, Javascript, HTML dlll </code></pre>

Catatan* Sebelum Anda memasukan kode khususnya kode/script PHP, HTML, Javascript, kedalam tag <pre> Anda terlebih dahulu harus melakukan parse terhadap script yang ingin Anda tambahkan menggunakan Kode Parse HTML yang juga tersedia di blog ini

Contoh Syntax Highlighter Simple Untuk Blog

Syntax Highlighter Simple Untuk Blog yang saya bagikan ini merupakan Syntax Highlighter sederhana. Anda juga bisa merubah background warna dari Syntax Highlighter sesuai dengan keinginan dengan merubah properti css background-color:#F7F7F9 Untuk kode warna bisa Anda lihat pada halaman Kode Warna Lengkap Dengan Nama

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simpel

Kang Nurul ImanJuly 26, 2016 at 2:26 PM

Kalau saya mah baru sekarang kang dengar syntax highkigher, maklum soalnya saya kan tidak terlalu hapal sama yang begituan, tapi ini bisa jadi pembelajaran deh untuk oe.
1. Ahmad ZaelaniJuly 26, 2016 at 5:06 PM
  
  sama kang Saya juga baru ngerti sekarang,, makanya langsung share biar kagak lupa..
  
2. Kang Nurul ImanJuly 27, 2016 at 9:49 AM
  
  Keren juga nih kang ahmad punya ilmu baru langsung dishare saya respect kang sama pengertiannya kang ahmad.

UnknownJuly 26, 2016 at 3:02 PM

mantap dah
Djangkaru BumiJuly 26, 2016 at 3:13 PM

Untuk kode cocok untuk blog yang berisi tutorial blog.
Sehingga kodenya akan tampak lebih rapi.
Blogku gado-gado masih malu untuk menerapkan kode diatas.
1. Ahmad ZaelaniJuly 26, 2016 at 5:06 PM
  
  benar kang biar lebih rapih dan mudah di mengerti...

Maman AchmanJuly 26, 2016 at 3:23 PM

Kalau saya pakai cara sederhana kang, cukup memasukan beberapa kode HTML diantara tulisan yang ingin di highligth, tanpa masuk ke template HTML.
1. Ahmad ZaelaniJuly 26, 2016 at 5:08 PM
  
  wah keren dong kalu biosa gitumah,, sebenarnya konsepnya sih tetap dipanggil secara otomatis lewat tag "pre" hanya saja ketika pertama kali,, yah harus tambahin susunan css ke template.. :D

Syntax Highlighter Simple Untuk Blog

Related Posts :

11 Responses to "Syntax Highlighter Simple Untuk Blog"