Membuat Tampilan Syntax (Source Code Program) di Blogspot

Bagi seorang programmer yang memiliki hobi menulis pada halaman blog maupun situs web-nya, tentu ingin mendokumentasikan karya-karyanya dan membagi pengalamannya dengan yang lain. Tampilan source code suatu program sebaiknya mudah dibaca dan memiliki kemiripan pada bahasa pemrograman yang ditulis. Tentu fasilitas seperti ini tidak tersedia dalam pembuatan halaman blog baik pada blogspot, wordpress, dan jenis blog lainnya. Berikut contoh tampilan source code program yang menyerupai syntax dalam bahasa pemrograman baik dari warna font, nomor baris, dll pada halaman situs web:

Jika Anda menginginkan tampilan seperti di atas, sangatlah mudah untuk menampilkannya pada suatu blog atau halaman situs web Anda. Adapun langkah-langkahnya sebagai berikut:

1. Unduh berkas-berkas yang dipelukan di sini.
2. Hasil unduh berupa berkas dengan format *.rar, silakan ekstrak berkas tersebut terlebih dahulu.
3. Unggah semua berkas yang ada di-folder scripts dan style pada folder yang telah diekstrak tersebut ke media penyimpanan publik seperti berikut http://drive.google.com/.
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!, URL pada link di atas hanya contoh saja, Anda harus mengisinya sesuai dengan link tempat Anda menyimpan berkas tersebut.
6. Setelah itu, silakan 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

sumber : adhityapradypta.blogspot.com

Tweet