//
- 25 Mar 2013

Menambahkan Syntax Highlighter pada Post

Sejak kuatir dengan masalah copas-mencopas tulisan blog dengan para money-oriented blogger yang menghalalkan segala cara, saya menonaktifkan highlight teks di blog Morning Raindrops (caranya saya pakai disini)

Namun, masalah baru muncul. Kategori beberapa tutorial yang mengharuskan memberikan kode HTML tentu saja tidak dapat dikopi oleh pengunjung. Dan mulailah petualangan saya kembali searching di google bagaimana mengatasi masalah ini.

Terimakasih banyak untuk Alex Gorbatchev yang telah membuat project Syntax Highlighter yang merupakan kode dalam Google yang memudahkan para pemberi tutorial menyajikan kode-kodenya. Pengunjung tinggal mengklik 'View Plain' atau 'Copy to Clipboard' sehingga gampang meng-copy kode tersebut.

Berbekal tutorial dari sini, secara singkat dan bahasa ala saya, berikut caranya:

1. Unduh/download file-file script disini, lalu unggah/upload di tempat penyimpanan file online kita. Ingat untuk meng-unzip terlebih dahulu.

2. Pada dua kalimat terakhir shCoreStaticInclude.js (buka dengan notepad)

shCoreStaticInclude.js
view plaincopy to clipboardprint?
  1. dp.SyntaxHighlighter.ClipboardSwf = '[Path To]/clipboard.swf';    
  2. dp.SyntaxHighlighter.BloggerMode(true);   

Ubah [Path To] atau kata-kata di antara tanda petik satu ('....') dengan publik link yang mengarah ke file clipboard.swf

3. Lalu, pada kode HTML ( Dashboard > Template > Edit HTML) tempatkan kode berikut sebelum tag </head> :

  1. <link type="text/css" rel="stylesheet" href="[Path To]/SyntaxHighlighterModified.css"></link>  
  2. </head>  


4. Kemudian, masih pada kode HTML, setelah tag <body> tempatkan kode berikut:

  1. <body>    
  2.     <script language="javascript" src="[Path To]/shCoreStaticInclude.js"></script>    

Dengan demikian konfigurasi dasar telah selesai.

5. Terakhir, kode yang ingin ditampilkan pada blog post, bisa dikonvert di http://syntaxhighlighter.relic19.net/ pada kolom Input Area. Klik Convert Code lalu kopi-kan kode HTML di bawahnya. Kita hanya paste-kan kode ini di post yang kita inginkan dalam kolom HTML.

Nah sekarang, pengunjung bisa meng-kopi kode-kode tersebut dengan mengklik 'Copy to Clipboard' atau 'View Plain' tanpa terganggu dengan highlight teks yang disabled ^___^


post signature

11 komentar:

  1. may, syntax highlighter ini fungsinya apa? duh kayaknya aku masih harus banyak belajar deh soal ginian.. hehehe

    BalasHapus
  2. Mudah-mudahan bisa mengurangi para akun-akun jahil yang hobi copast sembarangan.

    BalasHapus
  3. Itu masih bisa di copas loh mbak.. :D

    BalasHapus
  4. biar ga dicopas ya..?
    untung tulisanku ga ada yang mutu
    kayaknya aman dari copas copasan gitu

    BalasHapus
  5. *ngangguk2* semoga bermanfaat bagi yang sering menyajikan tutorial..
    html itu bikin puyeng mata ih -_-

    BalasHapus
  6. @Novatempat menuliskan kode mbak...kolom-kolom di atas itu :)

    BalasHapus
  7. nggak usah pakai code script syntax, soalnya tulisanku kagak jelas + jelek, jd di copy juga gpp :)
    tp alhamdullilah yang copy, selama ini sering bilang sih, jd tidak ada masalah :)

    BalasHapus
  8. Tambah canggih aja sih, May :)
    Kamu emang orangnya seneng belajar sih, ya. Salut :)

    BalasHapus
  9. nanti efeknya pengunjung jadi gak bisa klik kanan kah mbak Mayya?

    BalasHapus

Your thoughts greatly appreciated! Share it with us! (^_^)
Nowadays, I've been have hard times to reply comments or blogwalking to your blog. So, thank you so much for visiting me here!

Facebook

This blog is
Protected by Copyscape Plagiarism Detection
myfreecopyright.com registered & protected
DMCA.com
Copyrighted by Mayya.
Don't copy anything of this blog without any permissions.