Untuk menampilkan kode HTML di Blogger sebagai teks, masukkan isi kode yang sudah di-escape ke dalam elemen <pre><code>. Wadah tersebut memberi struktur blok kode, sedangkan escaping membuat tanda HTML dibaca sebagai karakter. Menaruh tag mentah di dalam wadah saja belum cukup.
Cara ini berguna untuk tutorial yang perlu disalin pembaca. Anda dapat membuatnya melalui tampilan HTML pada editor postingan, tanpa memasang pustaka penyorot sintaks atau menyunting tema. Contoh berikut hanya menampilkan tautan ilustratif sebagai tulisan; ia tidak membuat tautan aktif di dalam hasil blok kode.
Bedakan wadah blok kode dari isi yang ditampilkan
Dokumentasi elemen pre di MDN menjelaskan bahwa elemen ini mewakili teks berformat awal, termasuk spasi dan baris. Namun, isinya tetap diproses sebagai HTML. Karena itu, tag yang hendak diperlihatkan kepada pembaca perlu diubah menjadi referensi karakter.
Sementara itu, elemen code menandai potongan kode komputer. Untuk beberapa baris, elemen tersebut dapat diletakkan di dalam <pre>. Pasangan ini membantu menyatakan tujuan isi, tetapi tidak otomatis mengubah semua tag mentah menjadi teks.
Pikirkan dua bagian terpisah: tag pembuka dan penutup wadah harus tetap menjadi HTML, sedangkan contoh di dalamnya diubah menjadi karakter yang akan ditampilkan. Jika seluruh wadah ikut di-escape sebelum ditempel ke editor HTML, pembaca justru akan melihat tulisan pembungkusnya juga.
Escape isi contoh dengan urutan yang benar
Referensi karakter HTML mewakili karakter tertentu dalam hasil tampilan. Untuk contoh sederhana dalam isi elemen, tiga penggantian berikut membantu mempertahankan teks asli:
- Ubah karakter
&menjadi tulisan&. - Ubah karakter
<menjadi tulisan<. - Ubah karakter
>menjadi tulisan>.
Kerjakan penggantian ampersand lebih dahulu pada kode mentah. Bila tanda kurang dari diubah lebih dulu, lalu seluruh ampersand diganti, referensi yang baru dibuat akan ikut berubah. Itulah salah satu penyebab pembaca melihat tulisan < padahal yang diharapkan adalah tanda <.
Urutan tersebut adalah cara praktis saat melakukan penggantian manual. Gunakan satu salinan sumber yang jelas dan jangan menjalankan penggantian berulang pada hasil yang sudah diproses. Tujuannya mempertahankan karakter asli, bukan membuat lapisan escaping sebanyak mungkin.
Tanda kutip pada contoh berikut berada dalam teks blok kode, bukan menjadi pembatas atribut wadah. Kebutuhan escaping berbeda ketika Anda benar-benar menyusun nilai atribut HTML; jangan menerapkan contoh ini sebagai aturan umum untuk semua konteks penyisipan data.
Salin contoh lengkap ke tampilan HTML postingan
Buat draf latihan atau simpan salinan isi sebelum mengubah artikel penting. Untuk pengelolaan cadangan yang lebih luas, gunakan panduan backup Blogger untuk konten, tema, dan gadget. Pada latihan ini, perubahan hanya diperlukan di isi postingan.
Buka postingan, pilih mode Tampilan HTML dari pengaturan mode editor, lalu tempatkan kursor di posisi blok kode. Nama atau letak kontrol dapat berbeda menurut bahasa dan tampilan editor. Pastikan Anda sedang mengedit isi artikel sebelum menempelkan contoh berikut.
Salin seluruh isi kotak ini, mulai dari pembuka pre sampai penutup pre, ke tampilan HTML. Isi di antara code sudah di-escape, jadi jangan memproses ulang contoh lengkapnya.
<pre style="white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;padding:1rem;background:#f1f5f9;color:#172033;border:1px solid #cbd5e1;border-radius:0.5rem;"><code><a href="https://example.com/">Baca panduan & catatan</a></code></pre>Setelah diproses sebagai HTML postingan, blok tersebut seharusnya memperlihatkan satu baris berikut sebagai teks: <a href="https://example.com/">Baca panduan & catatan</a>. Kata “Baca panduan” tetap menjadi bagian dari tulisan kode, bukan tautan yang bisa diklik.
Alamat example.com hanya dipakai sebagai contoh. Anda boleh mengganti isi kode untuk tutorial sendiri, lalu meng-escape isi baru itu satu kali sebelum memasukkannya ke wadah. Jangan menambahkan pembungkus dokumen seperti html, head, atau body ke contoh komponen postingan ini.
Pahami mengapa contoh tutorial mempunyai dua lapisan
Ada dua hal yang berbeda: HTML yang Anda tempel ke postingan dan HTML sumber artikel yang sedang menjelaskan contoh tersebut. Dalam kotak siap salin di atas, pembuka pre harus terlihat sebagai tulisan agar pembaca dapat menyalinnya. Setelah disalin ke tampilan HTML postingan latihan, pembuka itu menjadi wadah sungguhan.
Isi wadah siap salin masih menggunakan referensi seperti <. Browser membacanya menjadi tanda kurang dari sebagai teks di dalam blok. Hasilnya adalah tulisan tag tautan, bukan elemen tautan. Inilah alasan Anda tidak perlu mengubah referensi tersebut secara manual sebelum menempelkan contoh.
Sebaliknya, jika sedang menulis tutorial yang ingin memperlihatkan tulisan referensi itu sendiri, ampersand-nya perlu diwakili lagi pada sumber tutorial. Perbedaan lapisan ini memang disengaja. Kesalahan terjadi ketika lapisan untuk menjelaskan contoh ikut ditempel sebagai wadah akhir, atau ketika hasil siap salin di-escape sekali lagi tanpa tujuan.
Patokan termudah adalah hasil yang Anda inginkan. Apakah pembaca harus melihat tag tautan, tulisan referensi karakter, atau kode wadah yang dapat disalin? Tetapkan satu tujuan sebelum mengganti karakter.
Atur baris panjang agar tetap terbaca di ponsel
Contoh menggunakan gaya inline yang berlaku pada blok tersebut. Properti white-space dengan nilai pre-wrap mempertahankan spasi serta baris sambil mengizinkan pembungkusan. Properti overflow-wrap dengan nilai anywhere membantu memecah rangkaian panjang saat diperlukan.
Pembungkusan visual bukan penambahan tag atau perubahan fungsi kode. Walaupun satu baris terlihat turun pada layar sempit, pembaca tetap perlu menyalin isinya dengan utuh. Untuk contoh yang mempunyai baris atau indentasi penting, pertahankan struktur aslinya dalam sumber.
Warna latar, warna teks, padding, dan border pada contoh dapat disesuaikan setelah keterbacaan diperiksa. Pastikan huruf tetap jelas pada tema yang Anda gunakan. Hindari mengecilkan font hanya agar seluruh kode muat dalam satu baris.
Periksa pratinjau, hasil salinan, dan draf tersimpan
Bantuan Blogger tentang pengelolaan postingan menyediakan langkah Pratinjau untuk memeriksa tampilan serta Simpan untuk menyimpan tanpa memublikasikan. Gunakan pratinjau setelah memasukkan contoh, lalu lakukan pemeriksaan berikut:
- Tanda pembuka dan penutup tag terlihat utuh sebagai teks.
- Teks contoh tidak berubah menjadi tautan aktif atau paragraf biasa di luar blok.
- Baris panjang tidak membuat seluruh halaman melebar pada layar ponsel.
- Isi blok yang disalin kembali ke editor teks tetap sesuai contoh.
Jika seluruh pembungkus terlihat padahal Anda ingin blok bergaya, periksa apakah contoh ditempel ke mode visual atau apakah pembungkusnya ikut di-escape. Jika tag justru hilang dan tinggal tulisan tautannya, isi contoh mungkin masih diproses sebagai HTML. Jika muncul tulisan referensi yang tidak diharapkan, periksa kemungkinan penggantian ampersand dilakukan dua kali.
Simpan draf, buka kembali editor, lalu periksa pratinjau sekali lagi. Untuk mengecek keterbacaan artikel secara lebih luas, lanjutkan dengan pengujian konten dan tampilan template Blogger. Blok kode berfungsi menyajikan contoh yang terbaca dan dapat disalin; penggunaan elemen ini tidak memberikan jaminan peringkat atau pengindeksan.
Komentar
Posting Komentar