Manipulasi Blockquote Syntax Highlighter

Manipulasi Blockquote Syntax Highlighter - Membuat Blockquote jadi Syntax Highlighter ? Saya ini belum lama kenal dengan yang namanya Syntax Highlighter dan baru beberapa waktu lalu saya tau kalau itu namanya syntax highlight . Dari dulu saya cari cari gak ketemu itu namanya apa , lah orang setau saya itu cuma kode area atau text area doang .

Nah baru beberapa waktu yang lalu saya nemu dan ternyata cara menginstalnya itu cukup mudah , tapi yang ribet adalah cara mengunakannya . Cara penerapan Syntax highlight ke dalam posting itu jujur membuat saya malas dan ribet karena harus dilakukan dengan cara manual seperti dibawah ini

<pre><code>
Isi dari kode yang akan ditampilkan
</code></pre>

Saya selalu berpikir kenapa Blogger ( blogspot ) tidak memberikan fitur tag pre otomatis seperti Blockquote ? kan simpel .

Dari pemikiran itu akhirnya saya memutuskan untuk mencari perbedaan tag pre dan blockquote yang sepertinya tidak berhubungan . Tapi ternyata secara tidak sengaja saya menemukannya :D . Manipulasi Syntax Highlight pada Blockquote . Jadi dengan ini semua tutorial yang dulu saya menggunakan Blockquote sudah berubah bentuk menjadi syntax dengan otomatis . Dan lagi , untuk membuat tampilan syntax tidak perlu lagi dengan cara manual karena hanya tinggal klik tombol Quote pada area posting .

Dan kali ini saya juga akan sekalian share sambil ngetest juga apa Blockquote syntax ini berfungsi dengan baik atau tidak :D .

Untuk menerapkan trik atau manipulasi ini , diharuskan menginstal syntax Highlighter pada blog , dan untuk tutorial itu sudah saya buatkan sebelumnya disini .
Dan untuk pilihan tema Syntax Highlighter bisa diambil disini .

Tutorial memasang syntax highlighter dijelaskan secara lengkap disana .

Dan jika sudah terpasang di blog anda , sekarang saatnya masuk ke tahap inti dari artikel ini yakni memanipulasi Blockquote .

Cara Memanipulasi Blockquote menjadi Syntax Highlighter
1. Masuk ke Blogger
2. Klik menu template dan lanjut Edit HTML .
3. Cari kode </body>
4. Letakkan script dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Manipulasi tag pada blockquote
$('.post-body, .post-body p, div.post-body, #text-body, #main_text').each(function () {
    $('blockquote[class="tr_bq"]').replaceWith(function () {
        return $('<pre><code>' + $(this).html() + '</code></pre>');
    });
});
//]]>
</script>

5. Kemudian simpan Template.

KEKURANGAN
Saya sampai saat ini masih menemukan kekurangan dalam penerapan teknik manipulasi ini .
Memang secara over all saya suka dan ini lebih simpel untuk penerapannya , namun tidak sempurna seperti dengan menggunakan tag pre.

Kita buat perbandingan dibawah ini antara Blockquote dan juga tag pre .

PERBANDINGAN

Pre

<script type='text/javascript'>
//<![CDATA[
// Manipulasi tag pada blockquote
$('.post-body, .post-body p, div.post-body, #text-body, #main_text').each(function () {
    $('blockquote[class="tr_bq"]').replaceWith(function () {
        return $('<pre><code>' + $(this).html() + '</code></pre>');
    });
});
//]]>
</script> 

Blockquote

<script type='text/javascript'>
//<![CDATA[
// Manipulasi tag pada blockquote
$('.post-body, .post-body p, div.post-body, #text-body, #main_text').each(function () {
    $('blockquote[class="tr_bq"]').replaceWith(function () {
        return $('<pre><code>' + $(this).html() + '</code></pre>');
    });
});
//]]>
</script> 

Terlepas dari ketidak sempurnaan blockquote , tapi setidaknya trik ini sudah cukup bahkan sangat membantu memudahkan pekerjaan kita menulis tutorial bukan ? Dan semoga Trik Manipulasi Blockquote Syntax Highlighter ini bermanfaat untuk kita semua . Atau mungkin ada yang mau nambahain untuk tampilan blockquote dan tag pre biar sama ?

 Trik ini saya nemu di :

http://mdf-blog.blogspot.com/2013/06/manipulasi-syntax-highlighter-pada-blockquote.html