BLOGGER :: Membuat Tampilan Syntax (Source Code Program) di Blogspot

Bagi seorang penulis yang sering bercengkrama dibidang IT khususnya programmer, tentu ingin berbagi pengalaman-pengalamannya selama ini dengan para programmer lainnya maupun orang-orang yang membutuhkannya. Tampilan source code suatu program di halaman web tentu akan menarik minat pengunjung yang sedang mencarinya untuk kebutuhannya. Saya menemukan di suatu halaman web yang menampilkan syntax suatu program yang menyerupai syntax dalam bahasa pemrograman baik dari warna font, nomor baris, dll. Adapun contoh tampilannya adalah sebagai berikut :

Jika, Anda menginginkan tampilan yang demikian di atas sangatlah mudah untuk mengaplikasinya pada suatu blog atau web page Anda. Adapun langkah-langkahnya sebagai berikut :

1. Download file-file yang dipelukan disini.
2. Hasil download berupa file rar maka ekstrak file tersebut terlebih dahulu.
3. Upload semua file yang ada di folder scripts dan style pada folder yang telah di-ekstrak tersebut ke web server. Agar lebih memudahkan proses download atau pemanggilan file-file tersebut oleh html di-blog atau halaman web Anda maka sebaiknya file tersebut disimpan di http://pages.google.com/. Adapun langkah-langkah cara menyimpan di google page tersebut sebagai berikut :
   
   • Pada halaman link di atas tadi klik link google site.
   • Lakukan proses register web atau blog yang akan Anda buat di google. Prosesnya sama seperti Anda membuat blog.
   • Setelah web berhasil dibuat, masuk ke halaman web Anda yang sudah register di google tadi.
   • Cari menu more action lalu pilih manage site.
   • Disebelah kiri halaman web (sidebar) terdapat page templates. Klik menu tersebut.
   • Setelah itu Anda akan menemukan tulisan file, maka Anda klik link file tersebut. Dari situlah Anda bisa meng-upload file-file tadi.
4. Silakan buka blog Anda di Dashboard/Layout/Edit HTML atau edit html Anda.
5. Copy-Paste Source Code javascript di bawah ini :
   
   view plainprint?

   1. //copy source code di bawah ini dan paste pada header web atau blog Anda  
   2. <link href='http://sites.google.com/site/adhit8ok/config/pagetemplates/file/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>  
   3. <script language='javascript' src='http://sites.google.com/site/adhit8ok/config/pagetemplates/file/shCore.js'/>  
   4. <script language='javascript' src='http://sites.google.com/site/adhit8ok/config/pagetemplates/file/shBrushCpp.js'/>  
   5. <script language='javascript' src='http://sites.google.com/site/adhit8ok/config/pagetemplates/file//shBrushJava.js'/>  
   6. <script language='javascript' src='http://sites.google.com/site/adhit8ok/config/pagetemplates/file//shBrushJScript.js'/>  
   7.   
   8. //copy source code di bawah ini dan paste pada body web atau blog Anda  
   9. //Lebih baik di-paste di atas code </body>  
   10. <script language='javascript'>  
   11. function start() {  
   12. dp.SyntaxHighlighter.BloggerMode();  
   13. dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);  
   14. }  
   15. window.onload = start;  
   16. </script>  
   Ingat, link di atas hanya contoh saja, Anda harus mengisinya sesuai dengan link tempat Anda menyimpan file tersebut.
6. Setelah itu simpan hasil edit html pada blog atau web Anda.
7. Untuk implementasi, lihat source code di bawah ini :
   
   view plainprint?

   1. <pre name="code" class="c-sharp">  
   2. ... some code here ...  
   3. </pre>  
   4.   
   5. //atau  
   6.   
   7. <textarea name="code" class="c#" cols="60" rows="10">  
   8. ... some code here ...  
   9. </textarea>  

Berikut ini adalah nama class dari implementasi javascript tersebut sesuai dengan bahasa pemrogramannya adalah sebagai berikut :

Bahasa Pemrograman	Nama class
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Java	java
PHP	php
Sql	sql
Delphi	delphi, pascal
Python	py, python
VB	vb, vb.net
Java Script	js, jscript, javascript
Ruby	rb, ruby, rails, ror
XML/HTML	xml, html, xhtml, xslt