SyntaxHighlighter merupakan cara mudah untuk menampilkan penggalan kode pos-line agar terlihat lebih menarik. Dengan menambahkan Syntax Highlighter, pembaca akan lebih mudah memahami setiap syntax baris kode yang anda tampilkan sebagaimana bahasa program aslinya. Syntax Highlight ini menggunakan 100% JavaScript based, jadi anda bisa menampilkannya pada platform (blog/site) apa saja, termasuk blogger tentunya.
SyntaxHighlighter menggunakan ekspresi reguler untuk parse teks. Jadi jika anda hanya mencoba untuk menyorot beberapa puluhan baris kode, mungkin tidak ada masalah. Tapi jika anda mencoba untuk menyorot 10kb lebih nilai teks, kemungkinan akan ada masalah karena lamanya waktu dalam proses eksekusi.
Bahasa Program yang didukung:
| Language | Aliases |
| C++ | cpp, c, c++ |
| C# | c#, c-sharp, csharp |
| CSS | css |
| Delphi | delphi, pascal |
| Java | java |
| Java Script | js, jscript, javascript |
| PHP | php |
| Python | py, python |
| Ruby | rb, ruby, rails, ror |
| Sql | sql |
| VB | vb, vb.net |
| XML/HTML | xml, html, xhtml, xslt |
Cara mengguakan Syntax highlighter pada blogger.
1. Silahkan anda download dulu semua filenya.
2. Extrack file SyntaxHighlighter_1.5.1.rar
3. Upload semua file Java Srcipt (pada folder Scripts) ke server milik anda, pages.google.com misalkan.
4. Letakan kode ini di bawah kode <head>
<link href='http://alamat-server-anda.com/SyntaxHighlighter.css'
rel='stylesheet' type='text/css'/>
<script src='http://alamat-server-anda.com/shCore.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushCss.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushJava.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushPython.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushSql.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushVb.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushXml.js' type='text/javascript'/>
<script src='http://alamat-server-anda.com/shBrushRuby.js' type='text/javascript'/>
5. Kemudian letakan ini diatas kode </body>
<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>
6. Simpan sebelumnya hasil kerja anda
Cara mengaktifkan kode pada halaman Post Editor
Letakkan kode anda pada halaman ditandai dengan tag <pre>. Kemudian menetapkan nama atribut untuk kode kelas dan atribut ke salah satu bahasa alias yang ingin Anda gunakan. (lihat tabel alias untuk type class)
<pre name="code" class="c-sharp"> ... some code here ... </pre>
Alternatif untuk <pre> adalah dengan menggunakan tag <textarea>. Tidak ada masalah dengan < karakter dalam kasus ini. Masalah utamanya adalah <pre> tidak dapat bekerja dengan baik jika tag JavaScript tetap digunakan untuk beberapa alasan (di RSS feed misalnya)
<textarea name="code" class="c#" cols="60" rows="10"> ... some code here ... </textarea>
Maaf saya tidak menyertakan contoh nyata dalam tutorial ini, namun anda jangan kuatir, ini sudah saya uji coba dan 100% berhasil.
Pelajari kode selengkapnya di alamat ini http://code.google.com/p/syntaxhighlighter/
63 comments:
waduh jarang ngobok2 code2 begituan om jadi migren liatnya juga...
pertamaxxxx bebas komen
iya oom makasih infonya tapi aku kayaknya udah pernah baca yg kaya gini di blog orang lain... deh oom... tapi sekali lagi makasih infonya... n tutorialnya
wew, posting pertama pasca liburan lebaran, langsung dengan ilmu baru.. Thanks om.. Langsung comot nih... :D
He... he.. pusih sebelah nich liatnya. Ada contoh yang udah teraplikasikan om?
kalo yang ini lom pernah nyoba sih tapi kalo om dah pernah coba berarti ada jaminan:) heheheh thank ya om
sip om, makin maknyus. kalo gini, blogger.com ga akan di bilang blog buat pemula doank. bener ga?
joels : Harus cepat minum obat yooo :D
Duan: nah telat mas duan pertamaxnya
anas: bener anas, udah banyak kok yang tau caranya..intinya cuma berbagi dan ngejar keyword aja :D
@mymoen : thanks juga ya mymoen
@tukang sapu radio : ada..tar om cari dulu..lupa juga alamat URL nya.
@rohman : iya bener kang, yang penting happy aja ..bodo amat apa kata orang :)
Blogger is the best, disimpan dulu om semoga berguna bagi nusa dan bangsa
thx mas.., disimpan dl.., kayaknya berguna ni ntar..:D
Posting oke punya nie. Dibookmark utk jadi referensi. Trims sudah sharing :)
wah mas agus udah mulai lagi nih kodenya :D dan om juga ternyata sering ke code.google ya kapan belajar sama om agus ah...
weleh ini tingkat tinggi ya Om? ijin save as ya siapa tahu nanti digunakan. Sekarang kayaknya belum. Lama ga posting makin siiiiip.
wah boleh ni om..
lebih lengkap penjelasannya mantab.... keep post om dan always exist... salam kenal
Cihui, akhirnya ada tutorial yang berbahasa Indonesia juga .. saya coba tutorial yg berbahasa Inggris gak bisa semua ... :)
dicoba deh....
waduh, url ku salah. posting lagi deh...
Duh...kok aku gagal terus ya om ?
apa karena aku gak upload semua filenya ya ?
aku cuma upload yang "xml" sama "cpp" aja... Apa itu penyebabnya ya ? :(
ini n yang sya cari2....
terima asih banyak oom...
this very useful...
two thumbs up....
;;)
@all : thanks untuk share komennya
@ocid : sebenarnya kamu bisa memilih yang mana saja gak harus semua.
Wah ini yang saya cari...
Mangstap Omm... Gin bookmark dlu ya...
terima kasih y, om..dcoba dulu..
pelajaran opo meneh iki, malah nambah puyeng aja...
udah baca kok masih lom mudeng :) save dulu ach
mantap om
mas boleh ltukeran link nga?salam kenal
wah...kelas berat nih kayaknya artikelnya....perlu dopping dulu biar ngerti...great post suhu
Wah, jd seperti notepad++ itu y om ... :-/ dicoba dulu ah ...
kepala langsung nyut-nyut liat kodenya :D
Rasanya ini yang saya cari-cari, wow makasih oom!
wah cucok nih buat saya yg suka nampilin code program. makasih om infonya :)
Ilmu baru neh. Asing banget, om.
Kayaknya perlu waktu banyak buat mempelajarinya neh
Menarik sih Om..
--sebenernya pengen nyoba..--
Tapi apa gak malah ngebebanin bandwith ??? :p
Hmm kalo begitu optional ya ni tutor ya Om? thom milih g aja deh. Inet dsini lelet sih :)
--> g usah dikomentari om nih komen.. dah ngasih solusinya :))
memang dasar orang yang aneh nih.. :)
Oom come back.... trus, langsung posting hal-hal sing ruwet kaya gini....
khas om banget... wakakakakakak...
kalo ada waktu saya mau privat ah.... tapi gak dalam waktu dekat nih...... hihihihihi.....
wew..... mantaps neh codingnya ....
klo nggak dipraktekin memang mumuet om ......
~x(
sip... tp gk aku coba
oh, ndak begitu butuh om, soalnya ndak pernah nulis tutorial berbau hateemel... hehehe... pernah sih, tapi ndak penting.. wekekeek...
highlighter memang bisa menghemat waktu ya om
Tapi om kalau mengkopy kode dari syntax ini sringkali deret angka disampingnya ikut ter-kopi, ada triknya?
@Abi Bakar: solusinya tinggal klik aja link "view plain" diatasnya mas abi :)
bentar2...pelan2..tuing2 neh
duh g ngerti banget,disave dulu ya Om siapatau berguna kedepannya thanks.
promosi dikit ya maklum baru buat blog heheh:
http://cupunista.blogspot.com
saya pake wordpress om jadi ambil pluginsnya aja tinggal instal... btw, good tips Om, oiya hakimtea.com memang masih ada masalah server, masih nyari solusi yg terbaik, kalo ada masukkan jangan sungkan, saya tunggu :)
Apa ini, Om??? Saya bener2 gak ngerti deh! :((
Wah lama enggak post langsung mak nyuss he...
makasih Om
langsung k TKP Ommmm
GW TAUNYA FOXPRO DOANK NIYYYY... BARU TRAINING ASP.NET NET JUGA 2 BULAN KEMARIN... HE..HE.. MUDAH2AN BULAN DEPAN DAH BISA GW BIKIN APLIKASI.... GAK SEKALIAN TULIS SOURCE2 ASP.net MAS? HE..HE...
thanks ya, dengan begitu, gua bisa menulis blog gua (sekalian promosi): olimpiadetoki.blogspot.com menggunakan sintak heglegter ini, sehingga kode-kodenya lebih menarik!
thanks om!
mampir malem-malem 8-}
mencoba mencernanya dulu sik om
wah... aku dah coba koq ndak bisa yach om 8-}
aku coba2 dulu lagi dech
thanks for the code
Kok aku gak bisa ya om ? apanya yang keliru ? saya upload semua file yang ada di folder script kecuali file .swf . Betul gak ?
oke, sip bos. aku nampilin script css, tapi buat nonaktifin tulisan :| buka tutup br :| yg artinya pindah baris code biar gak tampil :| buka tutup br :| di hasil publishan gimana ya ? pinginnya tampil kayak aslinya, jadi maksudku kode html semacam :| buka tutup br :| gitu gak perlu muncul, yak apa hayo ? :)] hehe aku nulis buka tutup br soalnya nih comment gak bisa buat nulis gituan =)) tapi ngerti maksudkua ? =))
hmmm oke sudah beres...xixixixi =)) ternyata tak buka di komputer lain bener bener perfect buat tampilannya...makasih ya ilmunya. n terus berkarya..
Punyaku kok gak bisa ya om ... ? coba bales di blogku ya om .... please :(
Luar biasa banget deh O_OM nih....
Sukses selalu...!!
o-om, ada code syntax highlighter yg enteng gak pake javascrip blas. namanya static syntax highlighter.. dapat dicek di http://syntaxhighlighter.relic19.net/moreinfo.html
you're the BEST lah pokoke, thank you om, sekarang code snipp nya uda cantik banget
punya saya juga tidak bisa ne om,
kalau saya letakkan CSSnya di ]]> baru bisa. . . ada penjelasan ?
kok warnanya beda ama yang gambar oom. punyaku jadi hitam putih tok? apa pengaruh dari desain template aku. makasih sebelumnya
contohnya disini om.. berbagi sesama.. hehehe http://www.stofmaps.co.cc/2012/02/cara-pasang-syntax-highlighter.html
Poskan Komentar
Silahkan beri komentar dengan bijak dan jangan sampai komentar anda masuk dalam {COMMENTS SPAM}. Thanks