Ditulis oleh: Ditulis pada: 11/06/2014
Merubah Blockquote Tag Menjadi Pre Code Tag Dengan Jquery - Ketika baru belajar membuat postingan tentang tutorial Blogger yang menyertakan kode-kode CSS, HTML, ataupun Javascript, saya menggunakan blockquote tag. Blockquote digunakan untuk menampilkan kode-kode HTML dan lainnya ini dengan alasan karena blockquote tag sudah tersedia di dalam editor postingan dengan tanda kutip pada menu editor postingan.
Padahal untuk menampilkan kode-kode HTML dan lain-lain di dalam postingan blog akan lebih baik jika menggunakan PRE tag. Namun sayangnya Blogger tidak/belum menambahkan menu pre tag ini ke dalam menu editor postingan. Sehingga yang baru belajar membuat postingan tutorial Blogger seperti saya banyak yang menggunakan fasilitas yang sudah ada yaitu blockquote.
Seiring berjalannya waktu, kini banyak mengenal cara penulisan kode HTML dan lainnya di dalam postingan, seperti penggunaan syntax highlighter yang tidak hanya menggunakan pre tag namun dengan menggunakan pre code tag. Kita mengenal Prism, Highlight, dan lain-lain yang membuat penulisan kode-kode di postingan menjadi lebih baik dengan berbagai variasi tampilan.
Namun bagaimana jika kita kini menggunakan syntax highlighter dan sedangkan postingan yang menggunakan blockquote untuk menampilkan kode sudah banyak? Apakah kita harus mengedit postingannya satu per satu?
Jika kita memiliki banyak waktu, mungkin kita bisa mengeditnya satu per satu (hehehe paling-paling bikin keriting pada jari...). Namun jangan khawatir, dengan bantuan jquery kita bisa merubah blockquote tag menjadi pre tag bahkan menjadi pre code tag agar bisa otomatis memiliki tampilan syntax highlighter yang kita gunakan sekarang.
Dan rekomendasi saya, coba gunakan Highlight.js untuk syntax highlighter di postingan karena ini tidak memerlukan tambahan class pada pre code tag-nya.
Sebagai contoh, misalnya sebelumnya kita membuat blockquote pada postingan untuk menampilkan kode seperti berikut ini.
<blockquote>
<h3 class='date-header'><span class='author'><b:if cond='data:top.showAuthor'><data:top.authorLabel/></b:if> : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span class='post-author vcard'>
<span class='fn'><data:post.author/></span>
</span></a> </span>
<span class='clock'> Posted on <data:post.dateHeader/> - <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a> <b:if cond='data:post.allowComments'> with <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></span></h3>
</blockquote>
Dan kini kita akan merubah tampilannya dengan menggunakan Highlighter.js tanpa merubah
<blockquote></blockquote> secara langsung, namun menggunakan jquery untuk merubahnya menjadi <pre><code></code></pre> dengan syarat kita sudah menyimpan kode-kode Highlighter.js syntax highlighter di dalam template blog kita.
Silahkan gunakan jquery di bawah ini:
var $span = $("blockquote");
$span.replaceWith(function () {
return $('<code/>', {
html: this.innerHTML
});
});
$( "code" ).wrap( "<pre/>" );
Perhatikan kode berikut:
var $span = $("blockquote");
$span.replaceWith(function () {
return $('<code/>', {
html: this.innerHTML
});
});
Adalah mengganti
blockquote dengan code, dengan elemen yang tetap seperti sebelumnya (isi blockquote tidak dihilangkan dengan kode ini html: this.innerHTML)$( "code" ).wrap( "<pre/>" );
Adalah
pre tag membungkus code tag. Setelah blockquote diganti menjadi code, maka selanjutnya code dibungkus dengan pre sehingga jika dilihat dengan inspect element maka blockquote di atas tadi akan berubah menjadi seperti berikut.
<pre><code>
<h3 class='date-header'><span class='author'><b:if cond='data:top.showAuthor'><data:top.authorLabel/></b:if> : <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span class='post-author vcard'>
<span class='fn'><data:post.author/></span>
</span></a> </span>
<span class='clock'> Posted on <data:post.dateHeader/> - <a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'> <data:post.timestamp/></abbr></a> <b:if cond='data:post.allowComments'> with <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Comments'><b:if cond='data:post.numComments == 0'>No comments</b:if><b:if cond='data:post.numComments == 1'>1 comment</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> comments</b:if></a></b:if></span></h3>
</code></pre>
Dengan begitu maka secara otomatis tampilannya akan berubah dari blockquote menjadi Hightlight.js syntax highlighter karena berubah menjadi
<pre><code></code></pre>.