Rabu, 01 Februari 2012

Mempercantik Tampilan Kode pada Postingan Blogger (Syntax Highlighter )

Anda bisa download terlebih dahulu source code lengkap di situs alexgorbatchev.com. Agar syntax highlighter dapat berjalan di web atau blog anda, anda harus melakukan beberapa langkah:

  1. Tambahkan  shCore.js and shCore.css di halaman web anda
  2. Tambahkan brush yang anda inginkan misalnya: shBrushJScript.js untuk JavaScript, shBrushVb.js untuk Visual Basic.
  3. Include-kan file shCore.css dan shThemeDefault.css
  4. Tuliskan kode di antara script <pre> dan </pre>. 
  5. Panggil SyntaxHighlighter.all() dengan Javascript
Bila anda belum mengerti metode diatas, anda bisa langsung mengarahkan link ke situs syntaxhighlighter tanpa harus mendownloadnya. Untuk pemilik blog ikuti langkah berikut:
  1. Login ke situs blogger.com
  2. Masuk ke Rancangan, kemudian pilih Edit Html.
  3. Cari kode ]]></b:skin> dan letakkan kode berikut tepat di bawah kode tadi.
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<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/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script language='javascript'> SyntaxHighlighter.all();</script>
Script pertama kedua, ketiga, dan sembilan adalah script yang wajib diisi, untuk yang ketiga dan seterusnya sesuai dengan jenis kode yang akan anda tampilkan misalnya shBrushJScript.js untuk JavaScript, shBrushVb.js untuk Visual Basic. Jika anda hanya mememerlukan php dan javascript sebaiknya anda menghapus link yang lainnya karena semakin banyak link akan memengaruhi kecepatan loading web anda.

4.Sekarang anda tinggal meletakkan kode postingan diantara kode berikut:
<pre class="brush: css">
    letakkan kode di sini
</pre>
sumber;http://ilkomtutorial.blogspot.com/

1 komentar:

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Justin Bieber, Gold Price in India