SyntaxHighlighter untuk blogspot - blogger

Jumat, 08 Juli 2011

SyntaxHighlighter untuk blogspot atau blogger bisa ngga yach..? dan apa itu SyntaxHighlighter ?. SyntaxHighlighter adalah sebuah aplikasi berbasis JavaScript yang bertujuan membantu pengembang / programmer untuk mengirim potongan kode online dengan mudah dan terlihat bagus dan mudah dipahami. Jika di dalam blogspot atau blogger memungkinkan anda untuk dengan mudah posting kode sintaks (seperti html script, asp script, javascript, vb script, xml script dan script lain) ke situs atau blog anda tanpa ada pengurangan yang di sebabkan oleh keterbatasan fasilitas.

Jika di Wordpress sudah banyak kita temui plugins atau addon's yang bisa digunakan untuk membuat sebuah SyntaxHighlighter. Akan tetapi di Blogspot bisa juga menggunakan SyntaxHighlighter. Jadi bila ada pertanyaan " Apakah bisa SyntaxHighlighter untuk blogspot ?" Jawabannya :  Bisa Banget Cuy ! :P. dan saya akan contohkan penggunaan SyntaxHighlighter (kode javascript) untuk  blogspot. seperti dibawah ini :

SyntaxHighlighter untuk  blogspot - blogger

Nah, diatas itu adalah tampilan SyntaxHighlighter untuk blogspot. Apabila anda menginginkan Blog anda bisa melakukannya silahkan ikuti caranya berikut ini. Login ke Blogger anda, masuk ke menu Rancangan >> Edit Html  Perlu di ingat sebelum menambahkan fasilitas SyntaxHighlighter sebaiknya simpan terlebih dahulu template blogger anda untuk alasan keamanan ( kali ajah kamu salah caranya sehingga template jadi miss atau terjadi kesalahan).

SyntaxHighlighter untuk  blogspot - blogger

Selanjutnya Cari tag <head>, letakkan dibawah tag tersebut atau setelah tag <meta description... > dengan skrip css ini :

<link href='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

Selanjutnya Cari Tag <!-- end outer-wrapper -->,  letakkan dibawahnya Script JS berikut ini :

<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushVb.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushCSharp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushCpp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushCss.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushJava.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushJScript.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPython.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushRuby.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushSql.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushXml.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPerl.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPowerShell.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = &#39;http://syntaxhighlighter.googlecode.com/svn/tags/1.5.1/Scripts/clipboard.swf&#39;;
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

Setelah itu Simpan. Sekarang anda sudah bisa menikmati SyntaxHighlighter untuk  blogspot. Untuk penulisan di bagian Isi / berita  pada blog gunakan perintah :

<pre name="code" class="-alias script yang ditampilkan-"> isi Script/code </pre>


Untuk Alias Script bisa di isi sesuai dengan code bahasa yang akan di tuliskan seperti (js untuk javascript, xml untuk xml atau html, asp untuk asp, vb, ruby, sql, dlsb).  Sebagai contoh silahkan tuliskan di blog anda tulisan seperti ini (gunakan mode html edit) :

<pre class="js" name="code">/** * Contoh SyntaxHighlighter */
function foo()
{
if (counter &lt;= 10)
return; // ini Berhasil Cuy ;)!
}
</pre>

Simpan dan liat hasilnya. Semoga bermanfaat. Jika anda masih bingung atau belum bisa silahkan tanya dan share bersama teman teman lainnya.

Apakah informasi ini bermanfaat ? Jika Ya, Berikan Ratting, Komentar, Pertanyaan seputar seputar SyntaxHighlighter untuk blogspot - blogger. terimakasih.



Jumat, Juli 08, 2011

2 comments:

tralinet mengatakan...

wah bermanfaat nech tot-nya makasi ya...!

Dona Alfian mengatakan...

@trali : semoga tutorial SyntaxHighlighter untuk blogspot bisa bermanfaat buat anda ya sob :D