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)
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> :
4. Kemudian, masih pada kode HTML, setelah tag <body> tempatkan kode berikut:
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 ^___^
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)
- dp.SyntaxHighlighter.ClipboardSwf = '[Path To]/clipboard.swf';
- 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> :
- <link type="text/css" rel="stylesheet" href="[Path To]/SyntaxHighlighterModified.css"></link>
- </head>
4. Kemudian, masih pada kode HTML, setelah tag <body> tempatkan kode berikut:
- <body>
- <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 ^___^
masalah terpecahkan ya
BalasHapusmay, syntax highlighter ini fungsinya apa? duh kayaknya aku masih harus banyak belajar deh soal ginian.. hehehe
BalasHapusMudah-mudahan bisa mengurangi para akun-akun jahil yang hobi copast sembarangan.
BalasHapusItu masih bisa di copas loh mbak.. :D
BalasHapusbiar ga dicopas ya..?
BalasHapusuntung tulisanku ga ada yang mutu
kayaknya aman dari copas copasan gitu
*ngangguk2* semoga bermanfaat bagi yang sering menyajikan tutorial..
BalasHapushtml itu bikin puyeng mata ih -_-
@Lidya - Mama Cal-VinIya mbak :)
BalasHapus@Novatempat menuliskan kode mbak...kolom-kolom di atas itu :)
BalasHapusnggak usah pakai code script syntax, soalnya tulisanku kagak jelas + jelek, jd di copy juga gpp :)
BalasHapustp alhamdullilah yang copy, selama ini sering bilang sih, jd tidak ada masalah :)
Tambah canggih aja sih, May :)
BalasHapusKamu emang orangnya seneng belajar sih, ya. Salut :)
nanti efeknya pengunjung jadi gak bisa klik kanan kah mbak Mayya?
BalasHapus