Buat Anda yang ingin berbagi informasi atau tips terkait pemrograman, sangat bijak sekali jika kita bisa menampilkan seperti apa kodingannya. Sehingga dapat membuat orang langsung menangkap maksud dan solusi yang ingin kita sampaikan. Bagi serang programmer seperti saya Syntax Highlighter ini sangat membantu sekali ketika ingin berbagi pengalaman dalam dunia pemrograman. Sebelumnya saya menggunakan screen capture berupa image untuk menampilkan source code. Dulu kebutuhannya biar sekalian bisa dibikinin ebook. Tapi tidak effektif ketika ingin ditampilkan di blog.
Setelah tahu caranya gimana buat nampilin source code di Blogspot, jadi terasa lebih baik. Gak perlu upload-upload gambar yang banyak. Jadi lebih gak lama loading time page-nya. Oke, berikut nih cara menampilkan kodingan di Blogspot dengan SyntaxHighlighter bagi yang belum tahu seperti saya untuk menampilkan source code program kita di Blogspot.
Pertama, silahkan login ke blogspot dan pilih menu Template lalu klik Edit Html. Setelah itu cari <head> section pada template yang ada. Tambahkan code berikut.
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.BloggerMode();
}
</script>
Sebenarnya ada banyak pilihan yang bisa kita gunakan untuk menampilkan source code tergantung jenis code nya apakah php, javascript, atau ruby, dan sebagainya. Kita harus me-load file javascript no 2 di atas sesuai bahasa yang ingin kita gunakan. Jika ada banyak bahasa, tinggal load semuanya aja. Berikut daftar javascript yang harus dipasang berdasarkan bahasa pemrograman.
- shBrushCpp.js
- shBrushCSharp.js
- shBrushCss.js
- shBrushDelphi.js
- shBrushJava.js
- shBrushJScript.js
- shBrushPhp.js
- shBrushPython.js
- shBrushRuby.js
- shBrushSql.js
- shBrushVb.js
- shBrushXml.js
- shCore.js
Selanjutnya setelah selesai kita tambahkan javascript tersebut, saatnya menggunakan Syntax Highlighter. Untuk menggunakannya sederhanya saja. Seperti berikut:
<pre class="brush: php" name="code"># Tulis kodingan php di sini</pre>
Ingat, class brush harus sesuai dengan code yang ingin kita tampilkan. Jika source code yang ingin kita tampilkan berupa bahasa php, maka beri nama class brush: php. Jika berupa javascript beri nama berupa class brush: js atau jscript atau javascript.
Demikianlah penggunakan Syntax Highlighter untuk menampilkan kodingan di blogspot. Semoga ada yang bisa terbantu dengan saya sharing di sini.
Happy code!
:)
ConversionConversion EmoticonEmoticon