TipsTrik79: Cara Menambahkan Syntax Highlighter pada Blogger

Balik lagi nih dengan saya, kali ini saya akan berbagi bagaimana cara menambahkan Syntax Highlighter pada bloger sobat.

nah, Syntax Highlighter itu sendiri menrupakan sebuah kotak yang biasanya digunakan untuk menampilkan Script/kode program. buat teman-teman yang punya web atau blog yang ingin menampilkan Script/kode program bisa dicoba cara yang satu ini.

Contoh tampilan Syntax Highlighter

Okeh tak perlu bicara panjang lebar, langsung aja kita mulai langkah-langkahnya.

langkah pertama adalah login dulu ke blog anda, setelah login masuk pada bagian "Tema" kemudian klik "Edit HTML" , seperti contoh gambar dibawah ini.

Kemudia cari kode </head>, agar tidak susah, tekan Ctrl+f kemudian ketikkan kode </head> pada pencarian seperti contoh gambar berikut.

Kemudian taruh kode berikut tepat diatas </head> kemudian klik Simpan Tema.


<script src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>

Setelah itu cari ]]></b:skin> kemudian taruh kode berikut tepat diatasnya, kemudian Simpan Tema.


/*syntax highlighter*/
pre{padding:.8em 1em;margin:0.5em 0;background-color:#EAEAEA;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}

Langkah terakhir yaitu cara menggunakan.
Buat program yang ingin kamu tampilkan dio blog kamu baik itu dari PHP, CSS, HTML maupun bahasa program yang lainnya. kemudian masuk ke blog anda dan pilih Postingan, lalu klik Entri Baru. pilih Tab HTML dan letakkan code program yang sudah dikonversikan tadi diantara <pre><code>Program yang telah dikonversikan</pre></code>. Seperti Gambar dibawah ini.

Masukkan kode program yang akan dikonversikan kemudian klik "Convert" Seperti gambar dibawah ini.

Maka ketika dijalankan hasilnya akan Seperti berikut

Catatan Penting!!!

Jika kode program yang ingin kamu tampilkan adalah kode program HTML, maka kode program tersebut harus melalui proses Conversi terlebih dahulu. untuk itu Silahkan klik HTML Encoder Tool. Program ini dibuat dan dikembangkan oleh Mohammad Mustafa Ahmedzai atau mybloggertricks.com.