Merubah Blockquote Tag Menjadi Pre Code Tag Dengan Jquery

Merubah Blockquote Tag Menjadi Pre Code Tag Dengan Jquery - Ketika gres berguru menciptakan postingan wacana tutorial Blogger yang menyertakan kode-kode CSS, HTML, ataupun Javascript, aku memakai blockquote tag. Blockquote dipakai untuk menampilkan kode-kode HTML dan lainnya ini dengan alasan alasannya blockquote tag sudah tersedia di dalam editor postingan dengan tanda kutip pada hidangan editor postingan.

Padahal untuk menampilkan kode-kode HTML dan lain-lain di dalam postingan blog akan lebih baik kalau memakai PRE tag. Namun sayangnya Blogger tidak/belum menambahkan hidangan pre tag ini ke dalam hidangan editor postingan. Sehingga yang gres berguru menciptakan postingan tutorial Blogger menyerupai aku banyak yang memakai kemudahan yang sudah ada ialah blockquote.

Seiring berjalannya waktu, kini banyak mengenal cara penulisan isyarat HTML dan lainnya di dalam postingan, menyerupai penggunaan syntax highlighter yang tidak hanya memakai pre tag namun dengan memakai pre code tag. Kita mengenal Prism, Highlight, dan lain-lain yang menciptakan penulisan kode-kode di postingan menjadi lebih baik dengan aneka macam variasi tampilan.

Namun bagaimana kalau kita kini memakai syntax highlighter dan sedangkan postingan yang memakai blockquote untuk menampilkan isyarat sudah banyak? Apakah kita harus mengedit postingannya satu per satu?

Jika kita mempunyai banyak waktu, mungkin kita dapat mengeditnya satu per satu (hehehe paling-paling bikin keriting pada jari...). Namun jangan khawatir, dengan pemberian jquery kita dapat merubah blockquote tag menjadi pre tag bahkan menjadi pre code tag biar dapat otomatis mempunyai tampilan syntax highlighter yang kita gunakan sekarang.

Dan rekomendasi saya, coba gunakan Highlight.js untuk syntax highlighter di postingan alasannya ini tidak memerlukan pemanis class pada pre code tag-nya.

Sebagai contoh, contohnya sebelumnya kita menciptakan blockquote pada postingan untuk menampilkan isyarat menyerupai 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 &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></span></h3>
 </blockquote>

JSFIDDLE

Dan kini kita akan merubah tampilannya dengan memakai Highlighter.js tanpa merubah <blockquote></blockquote> secara langsung, namun memakai 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 isyarat berikut:

    var $span = $("blockquote");
 $span.replaceWith(function () {
     return $('<code/>', {
         html: this.innerHTML
     });
 });

Adalah mengganti blockquote dengan code, dengan elemen yang tetap menyerupai sebelumnya (isi blockquote tidak dihilangkan dengan isyarat 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 kalau dilihat dengan inspect element maka blockquote di atas tadi akan menjelma menyerupai 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 &gt;= 2'><data:post.numComments/> comments</b:if></a></b:if></span></h3>
 </code></pre>

DEMO

Dengan begitu maka secara otomatis tampilannya akan berubah dari blockquote menjadi Hightlight.js syntax highlighter alasannya menjelma <pre><code></code></pre>.

Sumber https://www.kompiajaib.com/

Share this post