Tulisan "Cara membuat Syntax Highlighter" ini merupakan satu dari sekian banyak cara membuat tampilan daripada Blockquote pada blog. Adapun versi dari highlighter ini adalah Syntax Highlighter V.3 yang mempunyai berbagai background menarik yang bisa sobat gunakan pada blog sobat. Mungkin dari sobat masih ada yang belum mengerti untuk apa Syntax Highlighter ini digunakan. Berikut sedikit ulasan mengenai Syntax Highlighter ini:
Syntax Highlighter merupakan suatu fitur dari text editor, khususnya editor source code, html, php atau bahasa pemrograman apapun sehingga berbeda dengan tulisan lain di sekitarnya. Fungsinya untuk memudahkan programmer dalam membaca dan menganalisa source code tersebut.
Nah..buat sobat blogger yang sering memberikan post source code seperti html, php, dan lain sebagainya, syntax highlighter ini sangat berguna sekali untuk mempermudah membedakan source code dengan paragraf lain dalam satu tulisan kita. Selain itu juga syntax highlighter ini juga dapat membuat penampilan yang sangat menarik pada Blockquote pada blog anda.
Fungsi syntax highlighter ini sebenarnya tidak jauh berbeda dengan Blockquote pada blog anda. Hanya saja Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namun Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh JQuery. Adapun fitus yang diberikan pada syntax highlighter ini adalah adanya:
- Fasilitas Print untuk code
- Fasilitas view source yaitu membuka barisan kode dalam popup windows.
- Ada 8 (delapan) jenis Themes yang bisa kamu gunakan
Baiklah, mungkin sudah cukup jelas dengan penjelasan yang sudah saya berikan. Sekarang kita akan belajar bagaimana membuat Syntax Highlighter ini pada blog. Sekarang silahkan ikuti langkah-langkah di bawah ini:
1. Login ke blogger dengan account anda
2. Pada Dashboard blog anda, silahkan pilih Template => Edit HTML => Lanjutkan.
3. Cari kode <head> dan letakkan kode berikut dibawahnya.
<<link href='http://sites.google.com/site/bloggermintcom/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<script src='http://tutorialforyou.googlecode.com/files/shCore.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushCss.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushJScript.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Note:<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>
<script src='http://tutorialforyou.googlecode.com/files/shCore.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushCss.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushJScript.js' type='text/javascript'/>
<script src='http://tutorialforyou.googlecode.com/files/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Perhatikan kode berwarna HIJAU, kode tersebut merupakan kode pembentuk background dari syntax highlighter anda nantinya. Biar variatif, silahkan anda ganti kode tersebut dengan memilih kode jenis-jenis background yang saya berikan di bawah.
4. Setelah selesai, silahkan Simpan Template.
Cara Menampilkan Syntax Highlighter pada Postingan
1. Pada kotak postingan blog, anda harus berada pada Edit HTML.
2. Silahkan gunakan (paste-kan)kode berikut ini:
<pre class='brush:js'>
LETAKAN KODE SCRIPT YANG AKAN DIPASANG DISINI
</pre>
Note:LETAKAN KODE SCRIPT YANG AKAN DIPASANG DISINI
</pre>
Setiap anda ingin menampilakn kode dalam bentuk syntax highlighter ini, anda harus memasukkan kode di atas pada kotam postingan anda.
3. Setelah selesai, silahkan Terbitkan tulisan anda.
Untuk pratinjaunya, silahakan lihat demo dari syntax highlighter dengan menggunakan background Django.
Semoga bermanfaat dan mohon maaf jika ada kesalahan.
Untuk jenis background dari syntax highlighter. Silahkan lihat di sini.
