Haloo sobat media2give^^ Jumpa lagi ya dengan kalian di posting ini.Yap,kali ini saya mau share seputar blogging lagi karena udah lama juga nggak membahas tentang ini.Nah,untuk artikel ini kita akan belajar tentang Cara Membuat Syntax Highlighter Di Postingan Blog.Sudah tau belum apa itu Syntax Highlighter? Rasanya pernah denger,tapi nggak tau apa maksudnya.Hmm,okelah kalau begitu akan saya bantu jelaskan biar pada ngerti hehe..
Syntax Highlighter ini merupakan fitur teks editor yang menyoroti bagian teks tertentu dengan warna dan font yang berbeda dan dibuat oleh Alex Gorbatchev (2004-2008).Syntax Highlighter biasa dipakai untuk menulis source code pada blog,website ataupun forum online.Fungsinya adalah untuk memudahkan seseorang saat menuliskan kode script dan membuat yang membacanya lebih fokus karena tampilannya yang berbeda dengan teks dalam halaman artikel tersebut.
Jika kalian pernah membaca buku lalu menandai kata/kalimat penting dengan stabilo,berarti kalian akan lebih mudah mempelajari Syntax Highlighter ini,karena kegunaannya sama dengan stabilo.Pemakaian Syntax Highlighter ditujukan juga untuk menampilkan presentasi yang di dalamnya terdapat code source,misalnya seperti Javascript, HTML, XML, CSS, Python, PHP ataupun SQL.Sebenarnya tidak menggunakan Syntax Highlighter pun tidak jadi masalah.
Hanya saja jika dipakai,artikel dalam blog akan mudah dibedakan antara teks biasa dengan teks kode.Kode script yang telah diberi Syntax Highlighter akan berubah,dimana font dan warnanya akan berganti,namun posisi teksnya masih tetap sama dalam halaman web/blog.Syntax Highlighter mirip dengan Blockquote,tapi terdapat sedikit perbedaan antara keduanya.Blockquote hanya dapat memakai 1 warna saja untuk teks,sedangkan Syntax Highlighter warnanya dapat bervariasi sehingga terlihat menarik.
Selain itu,jika kita menggunakan Blockquote,warna font harus diubah secara manual sesuai dengan warna yang kita harapkan.Bagi seorang programmer,Syntax Highlighter akan membantu dalam proses analisa source code.Syntax Highlighter ini cukup ringan dan tidak memberatkan loading halaman blog karena didukung fitur jQuery.Lalu gimana cara memasang Syntax Highlighter di blog? Caranya cukup mudah,kalian tinggal ikuti saja petunjuk berikut ini :
1. Login ke blog kalian
2. Masuk ke menu Template > Edit HTML
3. Cari kode </head>
4. Gunakan Ctrl+F untuk memudahkan pencarian
5. Letakkan kode berikut ini tepat diatas kode </head> tadi
Related Posts:
<script src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>6. Cari kode ]]></b:skin>
7. Letakkan kode berikut ini tepat diatas kode ]]></b:skin>
/*syntax highlighter*/
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}8. Klik Simpan Template
9. Buka Situs Parse HTML ini
10. Masukkan code scriptnya di kotak isian > klik Parse
11. Copy code scriptnya
12. Klik Buat Entri Baru
12. Ubah tampilan menjadi HTML
13. Masukkan kode <pre><code>Kode Script Disini</pre></code>
14. Ganti tulisan Kode Script Disini dengan kode script kalian
15. Klik Publikasikan
bisa di coba nih gan. makasih infonya:)
Itu buat apa ya gan ? ada demonya gak ?
@Agung Widhiyatmoko
cobain aja gan,agar kode script di postingan bisa di bedakan dg teks biasa
@Andi Mariadi
ini fungsinya utk menempatkan script kode dalam satu tempat/kotak khusus gan agar mudah di pahami