Menampilkan kode HTML, CSS, dan JavaScript di dalam posting WordPress sebenarnya cukup mudah menggunakan Gutenberg. Namun, tampilan standar blok kode belum tentu sesuai dengan kebutuhan setiap website. Karena itu, kita bisa mencoba memberikan tampilan tambahan menggunakan CSS dan JavaScript.
Pada eksperimen ini, kita menggunakan class bawaan Gutenberg, yaitu .wp-block-code, kemudian menambahkan class khusus navin-code-block untuk memberikan styling tambahan. Pendekatan ini dibuat agar kode dapat digunakan sebagai percobaan pada berbagai tema WordPress. Hasilnya mungkin berbeda karena setiap tema dan plugin dapat memiliki struktur CSS dan JavaScript yang berbeda.
BacaJuga :
Eksperimen ini tidak dimaksudkan sebagai pengganti plugin syntax highlighting profesional. Tujuannya lebih sederhana, yaitu melihat sejauh mana CSS dan JavaScript dapat digunakan untuk mempercantik Gutenberg Code Block tanpa menggunakan plugin tambahan.
Cara Menggunakan
Pertama, pastikan Anda menggunakan Block Editor Gutenberg. Kemudian buat posting baru dan pilih:
Gutenberg → + → Kode
Setelah itu masukkan kode HTML, CSS, atau JavaScript yang ingin ditampilkan.
Contohnya:
<div class="contoh">
<h2>Contoh Kode HTML</h2>
<p>Ini adalah contoh kode yang ditampilkan di Gutenberg.</p>
</div>Anda tidak perlu mengubah kode HTML tersebut menjadi <pre><code> secara manual. Gutenberg akan menangani struktur blok kodenya.
CSS
CSS berikut digunakan untuk memberikan tampilan pada Gutenberg Code Block. Anda dapat mencoba memasukkannya ke CSS Tambahan pada WordPress.
Tempatkan CSS di bawah ini:
/* =========================================================
NAVIN CODE BLOCK
Global Gutenberg Code Block
Safe Scoped Styling
========================================================= */
.wp-block-code.navin-code-block {
--navin-code-bg: #f5f8f8;
--navin-code-border: #d8e6e6;
--navin-code-text: #263333;
--navin-code-tag: #007c7c;
--navin-code-attr: #2563a6;
--navin-code-string: #2f7d4a;
--navin-code-comment: #7a8585;
--navin-code-keyword: #8a4b9b;
position: relative;
width: 100%;
max-width: 100%;
margin: 24px 0;
padding: 0;
overflow: hidden;
background: var(--navin-code-bg);
border: 1px solid var(--navin-code-border);
border-radius: 12px;
box-sizing: border-box;
}
/* Code */
.wp-block-code.navin-code-block > code {
display: block;
width: 100%;
margin: 0;
padding: 20px;
overflow-x: auto;
background: transparent;
color: var(--navin-code-text);
font-family:
"SFMono-Regular",
Consolas,
"Liberation Mono",
Menlo,
monospace;
font-size: 14px;
line-height: 1.7;
white-space: pre;
tab-size: 2;
-webkit-overflow-scrolling: touch;
}
/* HTML Tag */
.wp-block-code.navin-code-block
.navin-code-tag {
color: var(--navin-code-tag);
}
/* Attribute */
.wp-block-code.navin-code-block
.navin-code-attr {
color: var(--navin-code-attr);
}
/* String / Value */
.wp-block-code.navin-code-block
.navin-code-string {
color: var(--navin-code-string);
}
/* Comment */
.wp-block-code.navin-code-block
.navin-code-comment {
color: var(--navin-code-comment);
font-style: italic;
}
/* Keyword */
.wp-block-code.navin-code-block
.navin-code-keyword {
color: var(--navin-code-keyword);
}
/* Scrollbar */
.wp-block-code.navin-code-block > code::-webkit-scrollbar {
height: 8px;
}
.wp-block-code.navin-code-block > code::-webkit-scrollbar-track {
background: transparent;
}
.wp-block-code.navin-code-block > code::-webkit-scrollbar-thumb {
background: #c7d8d8;
border-radius: 20px;
}
/* Selection */
.wp-block-code.navin-code-block > code::selection {
background: #cfe4e4;
}
/* Mobile */
@media (max-width: 600px) {
.wp-block-code.navin-code-block {
margin: 20px 0;
border-radius: 10px;
}
.wp-block-code.navin-code-block > code {
padding: 16px;
font-size: 13px;
line-height: 1.65;
}
}Lalu Simpan/Publikasikan CSS tersebut.
2. JavaScript global
Nah, ini bagian yang membuat sistem menjadi otomatis.
JavaScript ini hanya melakukan dua hal:
Blok Gutenberg .wp-block-code → ditambahkan .navin-code-block
Kemudian kode HTML di dalamnya diberi warna.
HTML Khusus tidak disentuh.
Pasang JavaScript berikut sebagai JavaScript global, bukan di CSS Tambahan:
(function () {
"use strict";
function escapeHTML(text) {
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
}
function highlightHTML(codeElement) {
if (!codeElement) {
return;
}
if (
codeElement.dataset.navinHighlighted === "true"
) {
return;
}
var source = codeElement.textContent || "";
if (!source.trim()) {
return;
}
var escaped = escapeHTML(source);
/*
* Comments
*/
escaped = escaped.replace(
/(<!--[\s\S]*?-->)/g,
'<span class="navin-code-comment">$1</span>'
);
/*
* HTML Tags
*/
escaped = escaped.replace(
/(<\/?)([a-zA-Z][a-zA-Z0-9:-]*)([\s\S]*?)(\/?>)/g,
function (
match,
opening,
tag,
attributes,
closing
) {
var highlightedAttributes =
attributes;
/*
* Strings
*/
highlightedAttributes =
highlightedAttributes.replace(
/("[^"]*"|'[^']*')/g,
'<span class="navin-code-string">$1</span>'
);
/*
* Attributes
*/
highlightedAttributes =
highlightedAttributes.replace(
/([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?=\s*=)/g,
'<span class="navin-code-attr">$1</span>'
);
return (
'<span class="navin-code-tag">' +
opening +
tag +
highlightedAttributes +
closing +
'</span>'
);
}
);
/*
* CSS / JavaScript keywords
* Hanya diterapkan pada teks yang belum berada
* dalam span tertentu.
*/
codeElement.innerHTML = escaped;
codeElement.dataset.navinHighlighted = "true";
}
function processCodeBlocks() {
var blocks =
document.querySelectorAll(
".wp-block-code"
);
blocks.forEach(
function (block) {
/*
* Tambahkan namespace kita.
*/
block.classList.add(
"navin-code-block"
);
/*
* Cari code langsung di dalam block.
*/
var code =
block.querySelector(
":scope > code"
);
if (!code) {
return;
}
highlightHTML(code);
}
);
}
function init() {
processCodeBlocks();
}
if (
document.readyState === "loading"
) {
document.addEventListener(
"DOMContentLoaded",
init
);
} else {
init();
}
})();Apakah Kode Ini Berhasil di Semua Tema?
Belum tentu.
Inilah bagian menarik dari eksperimen ini. Struktur Gutenberg pada dasarnya menggunakan class seperti .wp-block-code, tetapi tema WordPress dapat memberikan CSS tambahan, JavaScript, atau aturan styling sendiri terhadap elemen tersebut.
Akibatnya, kode yang berjalan dengan baik pada satu tema belum tentu menghasilkan tampilan yang sama pada tema lainnya.
Pada pengujian kami, tampilan dasar Code Block berhasil mendapatkan perubahan seperti background, border, font monospace, dan responsive layout. Namun, syntax highlighting otomatis membutuhkan pemrosesan tambahan dan hasilnya dapat berbeda tergantung lingkungan WordPress yang digunakan.
Karena itu, kode ini sebaiknya dianggap sebagai eksperimen, bukan solusi yang dijamin kompatibel dengan seluruh tema WordPress.
Apakah Aman Dicoba?
Secara konsep, kode ini dibuat agar hanya berhubungan dengan Gutenberg Code Block. Namun, seperti kode CSS dan JavaScript lainnya, tetap disarankan untuk melakukan pengujian terlebih dahulu pada website yang memiliki backup.
Jangan langsung menganggap kode ini kompatibel dengan semua tema atau plugin. Jika website menggunakan tema dengan styling Gutenberg yang cukup kompleks, hasilnya mungkin berbeda.
Jika Anda menggunakan plugin syntax highlighting, sebaiknya jangan menjalankan dua sistem highlighting sekaligus karena dapat menyebabkan konflik tampilan.
Bagikan Hasil Pengujian
Eksperimen ini justru menarik untuk diuji pada berbagai tema WordPress.
Jika kode berhasil bekerja pada website Anda, Anda dapat membagikan:
- Nama tema WordPress
- Versi WordPress
- Editor yang digunakan
- Hasil tampilan Code Block
- Apakah syntax highlighting bekerja
- Apakah terdapat konflik dengan plugin tertentu
Dengan begitu, kita bisa mengetahui apakah pendekatan ini dapat bekerja pada lebih banyak tema WordPress.
Kesimpulan
Gutenberg sudah menyediakan Code Block bawaan sehingga pengguna tidak perlu menggunakan <pre><code> secara manual hanya untuk menampilkan source code. CSS dan JavaScript dapat digunakan untuk memberikan tampilan tambahan, tetapi kompatibilitasnya tetap bergantung pada tema dan plugin yang digunakan.
Kode pada halaman ini disediakan sebagai eksperimen dan bahan pengujian. Silakan mencoba pada website WordPress Anda sendiri dan bandingkan hasilnya.
Jika berhasil, tentu akan menarik untuk mengetahui tema WordPress apa yang Anda gunakan dan bagaimana hasil syntax highlighting-nya.
Catatan: pada dua kotak kode di atas, Anda tinggal mengganti bagian kosong dengan CSS dan JavaScript yang sudah kita buat sebelumnya.
