TRANSFORM/Mengubah Kode Menjadi Teks Berwarna di HTML: Highlighting Otomatis untuk Kode Murni dan Konten Campuran (Sumber: ChatGPT+CoPilot)

VERSI BAHASA INDONESIA:

---

✅ Prompt Transformasi Source Code Lampiran (Code Attachment) – Input: Hanya Source Code (Code) | Format: (hanya) Kode

Buatkan bagian isi dari halaman HTML yang menampilkan potongan kode sebagai teks, dengan pewarnaan sintaks yang terang dan menarik menyerupai tema Visual Studio Code, seperti Monokai Bright atau Night Owl. Gunakan elemen <pre> dan <code>, serta <span> dan CSS untuk menerapkan pewarnaan. Potongan kode hanya ditampilkan sebagai teks dan tidak dijalankan.

---

✅ Prompt Transformasi Source Code Lampiran (Code Attachment) – Input: Campuran Konten Utama (Teks) dan Source Code | Format: Campuran Teks & Kode

Ambil teks berikut yang berisi campuran penjelasan dan potongan kode. Deteksi setiap bagian yang merupakan source code (HTML, CSS, JavaScript, dan sejenisnya), lalu ubah masing-masing bagian tersebut menjadi blok <pre><code> dengan pewarnaan sintaks yang terang dan menarik, mengikuti gaya tema Visual Studio Code seperti Monokai Bright atau Night Owl. Gunakan elemen <span> dan CSS untuk mengatur pewarnaan. Biarkan bagian teks biasa tetap seperti aslinya, tanpa perubahan.

---

---

ENGLISH VERSION:

---

✅ Prompt: Code Attachment Transformation – Input: Source Code Only | Format: Code (only)

Generate the body content of an HTML page that displays a code snippet as text, with bright and visually appealing syntax highlighting similar to Visual Studio Code themes such as Monokai Bright or Night Owl. Use the <pre> and <code> tags for structure, and apply syntax coloring using <span> elements and CSS. The code snippet should only be displayed as text—do not execute it.

---

✅ Prompt: Code Attachment Transformation – Input: Mixed Main Content (Text) and Code | Format: Mixed Text & Code

Process the following text containing a mix of explanations and code snippets. Identify all portions that represent source code (e.g., HTML, CSS, JavaScript, etc.), and convert each one into a <pre><code> block with bright and catchy syntax highlighting inspired by Visual Studio Code themes such as Monokai Bright or Night Owl. Use <span> elements and CSS for styling. Leave all non-code text (explanations or narrative) unchanged.

---

---

---

Contoh Blog hasil Konversi dgn 2 (kedua) PROMPT diatas:
CSS Tips of the Day: Text-Shadow sebagai Solusi Alternatif Font-Weight yang Tidak Berfungsi pada Tabel HTML (Sumber: ChatGPT)

---

---