Merubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript

Tutorial kali ini tentang merubah tag <blockquote> menjadi tag <pre><code> dengan JavaScript, dalam hal ini Vanilla JavaScript. Mari kita bahas!

Mukaddimah

Salah satu kebiasaan unik para Blogger pemula adalah menggunakan tag Blockquote untuk membukus tampilan kode-kode CSS, HTML, JavaScript, ataupun XML.

Bukan tanpa alasan, hal ini dilakukan karena kemudahan yang beriringan dengan keterbatasan pengetahuan dalam dasar-dasar nge-blog. Sehingga menjadi alergi untuk membuka opsi pengeditan di Tampilan HTML di Post Editor Blogger.

Kemudahan yang dimaksud ialah tag Blockquote atau Kutipan Teks menjadi salah satu menu di Post Editor, sementara tag Pre Code tidak ada di menu Post Editor. Tag Pre Code (beserta penutupnya) mesti diketik dalam tampilan HTML, yang saat itu melakukan pengeditan di tampilan HTML ribetnya bukan main. Bikin jengkel!

Setidaknya begitu yang saya lakukan dan rasakan dulu. Sehingga begitu banyak artikel yang berisi kode-kode di blog ini yang terbungkus oleh tag <blockquote>. Yang membuat saya tidak bisa menerapkan Syntax Highlighter. Sebab Syntax Highlighter di Blogger hanya akan berfungsi sempurna bila pakai tag Pre Code.

Namun, sekarang saya hepi 😀. Karena saat ini seperti ‘tidak ada lagi’ kode-kode yang dibungkus oleh tag Blockquote.

Kode-kode HTML, CSS, JavaScript, jQuery, Json maupun yang lainnya, kini terbungkus rapi oleh tag <pre><code>, tanpa perlu edit postingan sama sekali. Sudah begitu, ditambah dengan penggunaan Syntax Highlighter, yang otomatis membuat kode-kode itu berwarna-warni dari atas sampai akhir. Dapat dikatakan bahwa semua kode tampil dengan mode Syntax Highlighter secara kaffah.

Mau seperti itu? Begini caranya!

Baca juga: Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru

Cara Merubah Tag <blockquote> Menjadi Tag <pre> <code> dengan JavaScript

Kode Javascript ini secara kebetulan ketemu di Stack Overflow, yang kemudian dimodifikasi sedikit agar dapat diterapkan sesuai kebutuhan.

Berikut langkah-langkah penerapa cara mengubah tag Blockquote menjadi tag Pre Code menggunakan JavaScript, dalam hal ini tanpa atau tidak menggunakn jQuery.

1. Langkah Awal

Masuk atau login ke dashboard Blogger. Lalu ke menu Tema > Edit HTML.

Kemudian cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

Letakkan kode JavaScript berikut di atasnya.

2. Kode JavaScript

<script>
    //<![CDATA[
let foundBlockquote = document.querySelectorAll("blockquote");
for(let i = 0; i < foundBlockquote.length; i++){
  let camouflage = foundBlockquote[i];
  let replacement = document.createElement("pre");
replacement.innerHTML += replacement.innerHTML;
replacement.innerHTML += '<code>' + camouflage.innerHTML + '</code>';
 replacement.innerHTML = replacement.innerHTML.replace(/(<|&lt;)br\s*\/*(>|&gt;)/g,' ');
  camouflage.replaceWith(replacement);
const addprelem = document.querySelectorAll("pre");
addprelem.forEach(preatr => { 
preatr.classList.add('notranslate');preatr.tabIndex = 0;preatr.setAttribute('data-language', 'code'); });
}
//]]>
  </script>

Setelah itu Simpan Tema.

Sedikit saya perlu jelaskan. Adapun kode berikut:

const addprelem = document.querySelectorAll("pre");
addprelem.forEach(preatr => { 
preatr.classList.add('notranslate');preatr.tabIndex = 0;preatr.setAttribute('data-language', 'code'); });

Bisa tidak digunakan atau dihapus saja. Dalam kasus ini, potongan kode tersebut saya perlu tambahkan karena dibutuhkan. Selengkapnya tentang hal ini akan mungkin dijelaskan pada artikel selanjutnya.

Intinya, kode tersebut untuk menambahkan atribut pada elemen PRE.

3. Kode CSS (Opsional)

Rapikan tampilan Pre Code dengan menambahkan CSS berikut ini. Silahkan salin dan simpan kode CSS berikut di atas </style> atau ]]></b:skin>.

.post-body pre code, .post-body code {
    font-family: Consolas,Monaco,'
    Andale Mono',monospace;font-size: 100%;
    font-weight: normal;
}

.post-body pre {
    padding: 7px;
    border-radius: 4px;
    background-color: #23241f;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.4em!important;
}

pre,pre code {
    white-space: pre-wrap;
}

Namun bila di template Blogger Anda sudah ada kode CSS untuk mengatur tampilan pre code, maka CSS di atas tidak perlu ditambahkan lagi.

4. Terapkan  Syntax Highlighter (Opsional)

Lebih lanjut, Anda bisa menambakan pengaturan lanjutan dengan menerapkan Syntax Highlighter, agar baris kode terlihat berwarna.

Berikut artikel terkait untuk menerapkan Syntax Highlighter di Blogger:

• Cara Memasang Syntax Highlighter Seperti Sublime Text 
• Membuat Syntax Highlighter Otomatis Terbaru di Blogger

5. Preview

Bagi yang masih ragu-ragu dengan tutorial ini, berikut preview demo penerapannya.

CodePen

Penutup

Sejatinya cara ini tidak perlu diterapkan bilamana di awal membuat dan membangun blog telah memiliki cukup pengetahuan tentang CSS, HTML dan JavaScript. Setidaknya dasar-dasarnya saja.

Meskipun para kreator template Blogger telah berupaya keras untuk membuat ‘shortcut’ pengeditan tampilan blog lewat Tata Letak (Layout), tetap saja tidak serta merta membuat kita menjadi abai untuk belajar hal-hal yang bersinggungan menyangkut CSS, HTML dan JavaScript.

Demikian informasi tentang cara merubah tag Blockquote menjadi tag Pre Code dengan JavaScript. Meski pada penerapannya pada platform Blogger, kode JavaScript ini juga dapat dipastikan akan bekerja secara sempurna di platform atau tempat lain. Semoga mermanfaat dan selamat mencoba!