Blogger Tutorial

Cara Membuat Syntax Highlighter Ala Alex Gorbatchev

20.19,5 Comments


Seperti judulnya, kali ini saya ingin mengajak anda untuk membuat Syntax Highlighter, Apa Itu Syntax Highlighter? Syntax Highlighter bisa dibilang punya fungsi yang hampir sama dengan "Blockquote" namun bedanya Syntax Highlighter lebih dikhususkan untuk syntax HTML, CSS ataupun Javascript. Bentuk dari Syntax Highlighter pun dibuat menyerupai page Code di Aplikasi seperti Jcreator atau lainnya yang pastinya sudah sangat Familiar untuk anda yang berkecimpung di dunia Programming :D

Untuk yang masih bingung dan gak ada bayangan tentang bentuk dari Syntax Highlighter ini, silahkan liat gambar diatas atau silahkan liat penggunaannya yang saya contohkan dipostingan kali ini.

Lantas siapa yang Men-Develop Syntax Highlighter ini? Developernya adalah Alex Gorbatchev yang dari tahun 2004 hingga kini masih terus mengembangkan Syntax Highlighter ini. Dan jika berminat anda bisa ikut memberikan Donasi anda untuk pengembangannya...

Lalu bagaimana Cara menggunakannya?

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

</head>

5. Jika sudah ketemu, letakkan Kode dibawah ini tepat diatas atau sebelum kode tersebut:

<!-- Add-in CSS for syntax highlighting -->
<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/shThemeRDark.css' rel='stylesheet' type='text/css'/>
<!-- Add-in Script for syntax highlighting -->
<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/shBrushAS3.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.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/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.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/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.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/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.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/shBrushScala.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 src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- End code hilight -->


6. Jika sudah, Save Template anda.

Dan berikut cara penggunaanya di postingan:

Untuk Kode CSS:

<pre class="brush: css">

Letakkan Kode CSS Disini

</pre>


Untuk Kode HTML:

<pre class="brush: html">

Letakkan Kode HTML Disini

</pre>


Untuk Kode Javascript:

<pre class="brush: Java">

Letakkan Kode Javascript Disini

</pre>


Gimana gampang kan? hhe ... sebenernya sih tutorial aslinya lumayan ribet, cuma karena saya gak mau ribet jadi saya pake aja Kode yang ada di hostingannya Alex hhe... Makanya cuma tinggal masukkin Javascriptnya doank wkwkwkwk....

Oiya, klo ada pertanyaan atau ada bugs silahkan anda tanyakan sendiri kepada sang Developer soalnya saya gak ng'rubah kodenya sama sekali hhe.... dan berhubung ini masih Versi 3.0.83, jadi wajar aja klo anda merasa ini masih kurang sempurna, ya biarpun menurut saya ini udah luar biasa keren hhe...

Sekarang terserah anda, mau ikut menggunakannya atau tidak :D

Thank's To: Alex Gorbatchev

Update!

Untuk alasan kenyamanan dan mengurangi sedikit beban Loading Blog ini, Page Demo tutorial Syntax Highlighter tidak lagi saya tempatkan menyatu dengan postingan ini, melainkan saya pindahkan ke blog lain, untuk itu, silahkan KLIK DISINI untuk melihat Demo Tutorial ini.


hosting indonesia

You Might Also Like

5 komentar:

  1. mesra tenan sentuhan css mbah gorbachev, tutorialnya, lempar gayus sembunyi tangan, wkwkwk
    ngobrol koment ilang podho pak, aku wingi sore login di fb jebul ada yang ultah.. ane langsung ke blog dj-site, nulis dowo banget , klik post ilang terus, apalagi aku pake iphone nunyuk hurufe wae pake korek kuping.. akhirnya kabur wae wkwkwk
    happy birthday, moga tambah sukses dan tambah ganteng seperti keponakanku :D

    BalasHapus
  2. @ simple tips : He'eh Pak, Mbah Gorbachev kui salut tenan aku sama Higligter Syntaxnya hhe... smoga banyak yg ngasih donasi lah biar mbah Alex bisa bikin versi lbih kerennya hhe...

    Wah podo nek ngono haha... :L suwun pak :D

    BalasHapus
  3. Wih Mantep... Tapi Kayaknya Bikin Loading Blog jadi lelet Nih

    Saya Lebih Mementingkan usablity mas

    BalasHapus
  4. @ Nurul Imam : Klo Useability berarti gak sesuai sama alesan Loading, kan itu lebih prepare ke penggunaan si Admin, klo urusan loading mungkin masuk ke segi kenyamanan aja... Silahkan pake mana yg perlu aja sob...

    BalasHapus
  5. kalau mau nampilin <html< nya gimana ya? kok ilang?
    mohon bantuannya ya

    BalasHapus