Syntaxhighlighter Pada Blogspot - Mungkin sudah banyak yang familiar dengan tools yang satu ini, Syntaxhighlighter. Terutama bagi mereka yang sering menulis tentang tutorial programing, apalagi dengan engine wordpress self hosting. Ya, plugin ini memang sangat berguna untuk menampilkan listing program menjadi lebih menarik dibaca. Apalagi saat mengikuti step-by-step tentang tutorial tertentu pada sebuah blog.
Bagaimana dengan mereka yang menggunakan Blogspot?? Tenang, disini saya akan bagikan tutorial tentang cara menggunakan Syntaxhighlighter pada blogspot.
Step 1. Menggunakan Syntaxhighlighter Pada Blogspot
Copykan kode berikut ini pada bagian sebelum tag <head> pada kode HTML template blogger anda. Kalau yang belum tau letak dimana ngedit HTMLnya, di dashboard blogspot kita (sebelah kiri) ada menu Template, lalu pilih Edit HTML, lalu klik Proceed.
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
Step 2. Mengimplementasikan Syntaxhighlighter Pada Blogspot
Ada dua cara untuk menggunakan menggunakan Syntaxhighlighter Pada Blogspot. Cara pertama adalah menggunakan tag <script. Untuk menggunakanya, kita bisa menggunakan tag <script>dengan CDATA didalamnya, perhatikan contoh berikut ini:
<script type="syntaxhighlighter" class="brush: html"><![CDATA[ <html> <head> <title>Materi Kuliah Informatika</title> Contoh program, contoh tugas akhir" /> <meta name="description" content="Share your knowledge, <meta name="title" content="materi kuliah informatika, c and you will realize that this life is wonderfull when we share each other" ]]> </script>
Cara kedua untuk mengimplementasikan Syntaxhighlighter Pada Blogspot adalah menggunakan tag <pre></pre>. Jika anda memilih menggunakan cara yang kedua ini, Anda harus menggunakan html escape character. HTML special character adalah karakter-karakter khusus dalam dokumen HTML. Jika kode HTML tidak di konversi ke special character, kemungkinan blogger akan error dalam merender kode tersebut.
<pre class="brush:html"> Your 'HTML' code goes here
</pre>
Step 3. Mengganti Theme Syntaxhighlighter Pada Blogspot
Pengaturan standar Syntaxhighlighter tersebut akan ortomatis menggunakan theme default. Untuk menggunakan theme yang lain cukup dengan mengganti link css (baris kedua kode) dengan nama theme yang kita inginkan. Berikut daftar nama theme yang tersedia.
- shThemeDefault.css
- shThemeDjango.css
- shThemeEmacs.css
- shThemeFadeToGrey.css
- shThemeMidnight.css
- shThemeRDark.css
Menampilkan kode yang rapi dan mudah dibaca akan memudahkan pengunjung mengikuti tutorial dalam blog kita. Semoga tutorial menggunakan Syntaxhighlighter Pada Blogspot ini bisa bermanfaat untuk Anda, salam :)
Judul: Menggunakan Syntaxhighlighter Pada Blogspot - Tutorial Blogspot
Rating: 100% based on 9998 ratings. 9 user reviews.
Ditulis Oleh resrsr
Terimakasih atas kunjungan beserta kesediaan Anda membaca artikel ini. Kritik dan Saran dapat Anda sampaikan melalui Kotak komentar dibawah ini.
Rating: 100% based on 9998 ratings. 9 user reviews.
Ditulis Oleh resrsr
Terimakasih atas kunjungan beserta kesediaan Anda membaca artikel ini. Kritik dan Saran dapat Anda sampaikan melalui Kotak komentar dibawah ini.
{ 0 comments... read them below or add one }
Post a Comment
Silahkan tinggalkan komentar :)