Cara Pasang Syntax Highlighter Modern di Blogspot Agar Kode Lebih Rapi

Bagi pemilik blog tutorial, developer, atau pembuat template Blogger, menampilkan kode program di dalam artikel merupakan kebutuhan yang cukup sering muncul. Masalahnya, kode yang ditulis sebagai teks biasa biasanya sulit dibaca, terutama ketika isinya cukup panjang dan mempunyai banyak tanda kurung, atribut, selector, fungsi, atau tag.

Di sinilah syntax highlighter Blogspot menjadi berguna. Syntax highlighting memberikan warna dan format visual berbeda pada bagian tertentu dari kode sehingga pembaca dapat membedakan tag, atribut, string, komentar, fungsi, angka, selector, dan elemen kode lainnya dengan lebih mudah.

Pada artikel tutorial coding, tampilan code block juga perlu diperhatikan dari sisi responsive. Baris kode yang terlalu panjang seharusnya tidak memaksa seluruh halaman melebar. Sebaliknya, area kode dapat dibuat mempunyai horizontal scroll sehingga pembaca tetap dapat membaca seluruh kode tanpa merusak layout artikel.

Pada panduan ini, Anda akan mempelajari cara memasang syntax highlighter di Blogger menggunakan Prism.js, mulai dari persiapan library, pemasangan CSS dan JavaScript, penggunaan class bahasa seperti HTML, CSS, JavaScript, XML, dan JSON, pembuatan code block responsive, sampai penambahan tombol Copy Code agar kode lebih mudah disalin.

Apa Itu Syntax Highlighter?

Syntax highlighter adalah sistem yang memberikan penyorotan visual pada sintaks sebuah bahasa pemrograman atau bahasa markup. Bagian kode tertentu diberikan tampilan berbeda berdasarkan perannya dalam struktur kode.

Misalnya pada kode HTML, tag dapat mempunyai warna tertentu, atribut dapat dibedakan dari nilai atribut, sedangkan komentar dapat ditampilkan dengan warna yang berbeda. Pada CSS, selector, property, value, dan komentar dapat dibedakan secara visual.

Tujuan utamanya bukan sekadar membuat kode terlihat berwarna. Syntax highlighting membantu pembaca memahami struktur kode dengan lebih cepat.

Perbedaan Kode Biasa dan Kode dengan Syntax Highlighting

Kode biasa dapat ditampilkan menggunakan <pre> dan <code>. Struktur tersebut menjaga spasi dan baris kode sehingga kode tetap terlihat seperti kode.

Namun, semua teks biasanya mempunyai tampilan yang sama.

Dengan syntax highlighting, bagian kode dapat diberi penandaan berdasarkan bahasa yang digunakan. Hasilnya lebih nyaman dibaca ketika artikel berisi tutorial teknis yang panjang.

Sederhananya:

• Code block biasa menjaga format kode tetapi tidak memberikan penyorotan sintaks.
• Syntax highlighter menjaga struktur kode sekaligus memberikan penandaan visual berdasarkan sintaks.

Mengapa Syntax Highlighter Penting untuk Blog Tutorial?

Jika blog Anda sering membahas HTML, CSS, JavaScript, XML, JSON, atau script Blogger, pembaca kemungkinan perlu menyalin kode untuk dipraktikkan. Format kode yang rapi dapat membuat proses belajar menjadi lebih nyaman.

Beberapa manfaat utamanya adalah:

• Kode lebih mudah dibaca.
• Struktur sintaks lebih mudah dikenali.
• Contoh kode terlihat lebih terorganisasi.
• Kode panjang lebih mudah dipindai.
• Pembaca lebih mudah menemukan bagian tertentu.
• Code block dapat dibuat responsive.
• Tombol Copy Code dapat ditambahkan untuk mempermudah penyalinan.

Manfaat tersebut paling terasa pada artikel tutorial yang mempunyai banyak contoh kode.

Kenapa Menggunakan Prism.js?

Prism.js merupakan salah satu library yang dapat digunakan untuk syntax highlighting. Library ini dapat menangani berbagai bahasa dan menyediakan sistem plugin serta tema yang dapat disesuaikan.

Untuk Blogger, Prism.js menarik digunakan karena Anda dapat memasang bagian yang dibutuhkan kemudian menerapkan class seperti language-html, language-css, atau language-javascript pada code block.

Keuntungan pendekatan ini adalah struktur artikel tetap menggunakan HTML standar. Prism.js bertugas melakukan pemrosesan syntax highlighting ketika halaman dimuat.

Apa yang Perlu Disiapkan?

Sebelum memasang syntax highlighter Blogger, siapkan tiga bagian:

1. CSS untuk tampilan syntax highlighting.
2. JavaScript Prism.js untuk memproses kode.
3. Struktur HTML <pre><code> pada artikel.

Jika Anda ingin fitur tambahan seperti Copy Code, tambahkan JavaScript kecil khusus untuk tombol tersebut. Tidak perlu menggunakan library tambahan apabila fungsi copy dapat ditangani dengan JavaScript sederhana.

Cara Memasang Syntax Highlighter di Blogger dengan Prism.js

Langkah 1: Buka Editor HTML Template Blogger

Masuk ke dashboard Blogger, kemudian buka bagian tema atau template yang digunakan. Anda perlu mengedit HTML template agar library Prism.js dapat dimuat pada halaman.

Sebelum mengubah template, simpan cadangan template terlebih dahulu. Hal ini penting agar Anda mempunyai salinan ketika ingin kembali ke kondisi sebelumnya.

Langkah 2: Tambahkan CSS Prism.js

Letakkan stylesheet Prism.js pada bagian <head> template Blogger. Contoh berikut menggunakan tema Okaidia.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/themes/prism-okaidia.min.css">

CSS tersebut bertugas memberikan style dasar untuk elemen syntax highlighted yang dihasilkan Prism.js.

Langkah 3: Tambahkan JavaScript Prism.js

Setelah stylesheet tersedia, tambahkan JavaScript Prism.js. Untuk menjaga struktur template tetap sederhana, script dapat diletakkan menjelang penutup </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.30.0/prism.min.js"></script>

Untuk kebutuhan dasar HTML, CSS, dan JavaScript, file utama Prism dapat digunakan sebagai fondasi. Jika Anda membutuhkan bahasa tambahan, Prism juga mempunyai komponen bahasa yang dapat dimuat secara khusus.

Langkah 4: Simpan Perubahan Template

Setelah CSS dan JavaScript ditambahkan, simpan perubahan template. Kemudian buka salah satu artikel yang mempunyai code block untuk melakukan pengujian.

Cara Menampilkan Kode HTML dengan Prism.js

Setelah Prism.js aktif, gunakan struktur <pre><code> dan tambahkan class bahasa yang sesuai. Untuk HTML, Prism menggunakan class language-markup atau alias HTML yang sesuai dengan grammar markup.

Contoh kode HTML harus di-escape ketika ditempatkan di dalam artikel. Jangan menulis tag HTML mentah di dalam <code> karena browser dapat menganggapnya sebagai elemen HTML sungguhan.

<pre>
  <code class="language-markup">
    &lt;div class=&quot;box&quot;&gt;
      &lt;h2&gt;Judul&lt;/h2&gt;
      &lt;p&gt;Contoh teks.&lt;/p&gt;
    &lt;/div&gt;
  </code>
</pre>

Perhatikan perbedaan antara kode yang ingin ditampilkan dan HTML pembungkusnya. Tag di dalam contoh perlu diubah menjadi entity seperti < dan > agar tampil sebagai teks.

Cara Menampilkan Kode CSS dengan Syntax Highlighting

Untuk CSS, gunakan class language-css. Prism kemudian mengenali selector, property, value, angka, komentar, dan bagian sintaks CSS lainnya.

<pre>
  <code class="language-css">
    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
    }

    .title {
      font-size: 28px;
      line-height: 1.4;
    }
  </code>
</pre>

CSS seperti ini sering digunakan dalam artikel tutorial Blogger untuk menjelaskan desain tombol, container, card, code block, menu, atau komponen responsive.

Cara Menampilkan JavaScript dengan Prism.js

Gunakan class language-javascript ketika menampilkan JavaScript.

<pre>
  <code class="language-javascript">
    const button = document.querySelector('.copy-button');

    button.addEventListener('click', function () {
      console.log('Tombol diklik');
    });
  </code>
</pre>

Penandaan warna membantu pembaca membedakan keyword, string, function, selector, dan bagian kode lainnya.

Cara Menampilkan XML di Blogger

XML dapat ditampilkan menggunakan grammar markup. Ini juga relevan untuk tutorial template Blogger karena XML merupakan bagian penting dari struktur tema.

<pre>
  <code class="language-markup">
    &lt;widget id=&quot;Blog1&quot; type=&quot;Blog&quot;&gt;
      &lt;includable id=&quot;main&quot;&gt;
        ...
      &lt;/includable&gt;
    &lt;/widget&gt;
  </code>
</pre>

Untuk kode template Blogger, sangat penting meng-escape tag karena editor Blogger dan browser dapat membaca markup tersebut sebagai bagian dari struktur dokumen jika tidak ditampilkan sebagai teks.

Cara Menampilkan JSON dengan Syntax Highlighting

JSON sering digunakan ketika membahas data terstruktur, konfigurasi, API, maupun schema. Code block JSON dapat menggunakan class language-json.

<pre>
  <code class="language-json">
    {
      &quot;name&quot;: &quot;DamarSatria&quot;,
      &quot;platform&quot;: &quot;Blogger&quot;,
      &quot;status&quot;: &quot;active&quot;
    }
  </code>
</pre>

Jika artikel Anda banyak membahas JSON-LD, struktur seperti ini juga membantu pembaca membedakan nama property, string, angka, dan karakter sintaks.

Class Bahasa yang Digunakan oleh Prism.js

Prism menentukan grammar melalui class yang ditempatkan pada elemen <code> atau <pre>. Beberapa class yang umum digunakan adalah:

Jenis Kode	Class	Kegunaan
HTML	language-markup	Menampilkan markup HTML
XML	language-markup	Menampilkan XML dan markup terkait
CSS	language-css	Menyoroti sintaks CSS
JavaScript	language-javascript	Menyoroti sintaks JavaScript
JSON	language-json	Menampilkan struktur JSON

Cara Membuat Code Block Blogger yang Responsive

Salah satu masalah code block adalah baris kode yang sangat panjang. Jika elemen <pre> tidak mempunyai aturan overflow yang benar, baris panjang dapat memperlebar container artikel.

Solusinya adalah membatasi lebar code block dan mengaktifkan scroll horizontal.

.post-body pre[class*="language-"] {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

Dengan aturan tersebut, kode tetap berada di dalam area artikel. Jika ada baris yang terlalu panjang, pengguna dapat melakukan scroll secara horizontal.

Kenapa Horizontal Scroll Lebih Baik daripada Memaksa Baris Kode Turun?

Pada kode program, memaksa seluruh baris menjadi turun menggunakan word wrapping bisa membuat struktur kode sulit dibaca. Indentasi dan panjang baris menjadi tidak jelas.

Horizontal scroll mempertahankan format asli kode. Pengguna dapat menggeser ke kanan ketika ingin membaca bagian yang berada di luar lebar container.

Untuk artikel tutorial coding, perilaku ini biasanya lebih masuk akal dibanding membuat setiap karakter kode berpindah baris.

Cara Mengatur Tampilan Code Block agar Lebih Modern

Tema bawaan Prism dapat digunakan sebagai dasar, tetapi Anda juga dapat menyesuaikannya agar lebih cocok dengan template Blogger.

Contoh style tambahan yang sederhana:

.post-body pre[class*="language-"] {
  margin: 24px 0;
  padding: 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
}

.post-body code[class*="language-"],
.post-body pre[class*="language-"] {
  font-family: Consolas, Monaco, "Courier New", monospace;
}

.post-body pre[class*="language-"] code {
  white-space: inherit;
}

Style tersebut hanya mengatur beberapa aspek visual seperti jarak, radius, ukuran teks, dan font monospace. Warna syntax tetap ditentukan oleh tema Prism.

Cara Menyesuaikan Syntax Highlighter dengan Dark Mode Blogger

Jika template Blogger Anda memiliki dark mode, tema code block sebaiknya ikut menyesuaikan. Salah satu pendekatan adalah menggunakan tema Prism yang memang dirancang untuk tampilan gelap.

Alternatif lainnya adalah mempertahankan stylesheet Prism kemudian menimpa beberapa aturan menggunakan CSS dari template Blogger.

Perhatikan kontras antara background code block dan warna token. Jangan hanya mengganti background tanpa memeriksa keterbacaan seluruh sintaks.

Cara Membuat Code Block Tidak Merusak Layout Blogger

Selain overflow horizontal, ada beberapa hal yang perlu diperhatikan agar code block tidak memengaruhi layout artikel.

• Gunakan max-width: 100%.
• Gunakan box-sizing: border-box.
• Gunakan overflow-x: auto.
• Hindari width tetap yang lebih besar daripada container artikel.
• Gunakan font monospace dengan ukuran yang masih nyaman.
• Uji code block pada smartphone.

Jika template mempunyai aturan khusus pada elemen pre, periksa apakah style lama menyebabkan syntax highlighter berubah ukuran atau warna.

Cara Menambahkan Tombol Copy Code

Syntax highlighting membuat kode lebih mudah dibaca, tetapi pembaca tetap perlu menyalinnya. Karena itu, tombol Copy Code dapat menjadi fitur tambahan yang berguna untuk artikel tutorial.

Struktur HTML-nya dapat dibuat seperti berikut:

<div class="ds-code-box">
  <button type="button" class="ds-copy-code">Copy Code</button>

  <pre>
    <code class="language-css">
      .title {
        font-size: 24px;
      }
    </code>
  </pre>
</div>

Tombol diletakkan di dalam wrapper yang sama dengan code block sehingga posisi tombol dapat dikontrol dengan CSS.

CSS untuk Tombol Copy Code

Gunakan CSS sederhana supaya tombol tidak menjadi elemen yang terlalu berat.

.ds-code-box {
  position: relative;
  margin: 24px 0;
}

.ds-copy-code {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border: 0;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.ds-code-box pre {
  margin: 0;
  padding-top: 48px;
}

Padding atas pada code block dibuat lebih besar agar tombol tidak menutupi baris kode pertama.

JavaScript untuk Fungsi Copy Code

JavaScript berikut membaca isi teks dari elemen <code>, kemudian memasukkannya ke clipboard.

<script>
(function () {
  var buttons = document.querySelectorAll('.ds-copy-code');

  buttons.forEach(function (button) {
    button.addEventListener('click', async function () {
      var wrapper = button.closest('.ds-code-box');

      if (!wrapper) {
        return;
      }

      var code = wrapper.querySelector('code');

      if (!code) {
        return;
      }

      var text = code.textContent;

      try {
        await navigator.clipboard.writeText(text);
        button.textContent = 'Copied';

        setTimeout(function () {
          button.textContent = 'Copy Code';
        }, 1500);
      } catch (error) {
        button.textContent = 'Copy gagal';

        setTimeout(function () {
          button.textContent = 'Copy Code';
        }, 1500);
      }
    });
  });
})();
</script>

Script tersebut menggunakan Clipboard API. Jika browser atau kondisi halaman tidak mengizinkan akses clipboard, tombol akan memberikan status bahwa proses copy gagal.

Untuk blog yang menggunakan HTTPS, fitur clipboard biasanya lebih mudah diterapkan dibanding halaman yang tidak berada pada secure context.

Cara Menggabungkan Prism.js dan Copy Code

Kedua fitur tersebut mempunyai fungsi berbeda. Prism.js memproses syntax highlighting, sedangkan script Copy Code mengambil teks asli dari elemen kode.

Karena itu, Anda tidak perlu mencampurkan logic syntax highlighting dengan logic clipboard menjadi satu script besar.

Pemisahan ini membuat kode lebih mudah dipelihara. Jika suatu saat Anda ingin menghapus tombol Copy Code, syntax highlighting tetap dapat bekerja.

Urutan Pemasangan yang Disarankan

Untuk template Blogger, struktur implementasi dapat dibagi menjadi tiga bagian.

1. CSS Prism.js dan CSS tambahan diletakkan pada area stylesheet template.
2. Script Prism.js diletakkan pada area script template.
3. Struktur code block dan tombol Copy Code digunakan pada artikel atau template sesuai kebutuhan.

Pemisahan tersebut membantu menghindari penempatan kode secara acak di banyak tempat.

Apakah Prism.js Harus Dipasang di Setiap Artikel?

Tidak. Jika syntax highlighter merupakan fitur umum blog, library dapat dipasang sekali pada template. Artikel kemudian hanya menggunakan struktur <pre><code> dengan class bahasa yang sesuai.

Pendekatan seperti ini lebih praktis apabila Anda sering menerbitkan artikel tutorial coding.

Artikel berikutnya tidak perlu memuat library berulang kali. Cukup gunakan markup code block yang sesuai.

Cara Menggunakan Syntax Highlighter pada Banyak Artikel

Setelah library terpasang di template, gunakan pola yang konsisten pada semua artikel.

Contohnya untuk CSS:

<pre><code class="language-css">KODE CSS ANDA</code></pre>

Untuk JavaScript:

<pre><code class="language-javascript">KODE JAVASCRIPT ANDA</code></pre>

Untuk HTML:

<pre><code class="language-markup">KODE HTML ANDA</code></pre>

Dengan pola tersebut, seluruh artikel mempunyai struktur code block yang konsisten.

Cara Memasang Prism.js Secara Lebih Ringan

Syntax highlighter sendiri tidak harus menjadi komponen berat. Yang perlu diperhatikan adalah jumlah bahasa dan plugin yang dimuat.

Jika blog Anda hanya membahas HTML, CSS, JavaScript, XML, dan JSON, tidak perlu memuat puluhan grammar bahasa pemrograman yang tidak pernah digunakan.

Prism menyediakan komponen bahasa sehingga implementasi dapat disesuaikan dengan kebutuhan. Pilihan bahasa yang lebih terbatas dapat membantu menjaga struktur implementasi tetap sederhana.

Apakah Harus Menggunakan Autoloader Prism?

Prism menyediakan Autoloader untuk memuat grammar bahasa tertentu ketika diperlukan. Pendekatan tersebut berguna apabila blog menggunakan banyak bahasa pemrograman yang tidak selalu muncul di setiap halaman.

Namun, untuk blog Blogger yang hanya memerlukan beberapa bahasa umum, Anda dapat mempertimbangkan build yang lebih sederhana agar dependensi tetap terbatas.

Pilih pendekatan berdasarkan jenis konten. Jangan menambahkan plugin hanya karena tersedia jika fungsi tersebut tidak digunakan.

Cara Menghindari Script Berlebihan

Blog tutorial biasanya sudah mempunyai beberapa JavaScript lain seperti menu mobile, pencarian, dark mode, lazy loading, analytics, atau komponen khusus template.

Syntax highlighter sebaiknya tidak menambah script yang tidak diperlukan.

Beberapa prinsip sederhana:

• Gunakan satu library syntax highlighting.
• Jangan memasang dua syntax highlighter sekaligus.
• Gunakan plugin Prism hanya ketika memang diperlukan.
• Gabungkan fungsi Copy Code dalam satu script kecil.
• Hapus library lama jika sudah digantikan sistem baru.

Kesalahan Umum: Kode Tidak Mempunyai Warna

Jika code block tetap tampil seperti teks biasa, masalah paling umum adalah Prism.js belum dimuat atau class bahasa tidak sesuai.

Periksa apakah script Prism tersedia dan apakah elemen code mempunyai class yang benar.

Contoh:

<pre><code class="language-javascript">
const message = 'Halo Blogger';
</code></pre>

Tanpa class bahasa yang sesuai, Prism mungkin tidak tahu grammar mana yang harus digunakan.

Kesalahan Umum: CSS Prism Tidak Muncul

Jika syntax highlighting sudah diproses tetapi tampilannya tidak memiliki warna atau tema seperti yang diharapkan, periksa stylesheet Prism.

Pastikan URL stylesheet benar dan tidak terhapus ketika template diedit.

Selain itu, template Blogger dapat mempunyai CSS yang menimpa style Prism. Periksa aturan pada pre, code, .post-body pre, dan selector lain yang mungkin mempunyai specificity lebih tinggi.

Kesalahan Umum: Kode HTML Malah Menjadi Elemen

Ini merupakan salah satu masalah paling umum ketika membuat tutorial HTML di Blogger. Jika tag HTML ditulis langsung tanpa escaping, browser dapat mencoba merender tag tersebut.

Contohnya, jika Anda ingin menampilkan:

<div class="box">Konten</div>

kode yang tampil kepada pembaca harus tetap terlihat sebagai teks, bukan berubah menjadi elemen HTML.

Karena itu gunakan entity HTML seperti:

• < untuk tanda lebih kecil.
• > untuk tanda lebih besar.
• & untuk ampersand.
• " untuk tanda kutip ganda.

Kesalahan Umum: Kode Keluar dari Container

Jika code block menyebabkan halaman memiliki horizontal scroll di seluruh halaman, kemungkinan elemen pre atau child element mempunyai lebar yang terlalu besar.

Gunakan aturan berikut sebagai dasar:

pre[class*="language-"] {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

Periksa juga apakah ada elemen di dalam code block yang menggunakan width tetap lebih besar daripada parent.

Kesalahan Umum: Tampilan Rusak di Smartphone

Masalah pada smartphone biasanya berasal dari kombinasi font terlalu besar, padding yang terlalu lebar, atau code block yang tidak mempunyai overflow horizontal.

Uji artikel pada beberapa ukuran layar. Fokuskan pemeriksaan pada apakah pembaca masih dapat menggeser kode tanpa membuat seluruh halaman ikut bergeser.

Kesalahan Umum: Prism Bertabrakan dengan Template

Konflik dapat terjadi ketika template sudah memiliki style khusus untuk pre, code, atau syntax highlighter lainnya.

Jika template pernah menggunakan library berbeda, jangan hanya menambahkan Prism.js di atas kode lama. Hapus atau nonaktifkan komponen yang sudah tidak digunakan agar hanya ada satu sistem syntax highlighting.

Periksa juga script yang melakukan manipulasi otomatis terhadap elemen code karena dapat mengubah markup yang dibutuhkan Prism.

Cara Memeriksa Apakah Prism.js Sudah Aktif

Untuk pengecekan sederhana, buka artikel yang memiliki code block dan lihat apakah token kode sudah mempunyai warna. Jika tidak, buka developer tools browser dan periksa apakah file JavaScript Prism berhasil dimuat.

Anda juga dapat mengecek objek Prism melalui console browser.

typeof Prism

Jika script berhasil dimuat, browser akan mengenali objek Prism. Jika hasilnya menunjukkan bahwa objek tidak ditemukan, periksa kembali pemasangan script.

Cara Memeriksa Class Code Block

Periksa source HTML artikel dan pastikan class bahasa berada pada elemen code.

<pre>
  <code class="language-html">
    ...
  </code>
</pre>

Anda dapat memilih struktur class yang sesuai dengan grammar Prism yang digunakan. Untuk markup HTML atau XML, grammar markup dapat digunakan.

Apakah Syntax Highlighter Bisa Digunakan untuk JSON-LD?

Bisa sebagai contoh kode yang ditampilkan. Ketika Anda menulis tutorial tentang schema atau JSON-LD, kode dapat ditampilkan sebagai code block menggunakan grammar JSON.

Yang perlu diperhatikan adalah membedakan kode yang hanya ditampilkan kepada pembaca dengan script yang benar-benar dijalankan browser. Kode JSON-LD yang ingin dieksekusi oleh browser harus ditempatkan sesuai struktur halaman, sedangkan contoh yang hanya ingin diperlihatkan kepada pembaca harus di-escape dan ditempatkan di dalam code block.

Perbedaan Kode yang Ditampilkan dan Kode yang Dieksekusi

Ini penting terutama dalam artikel tutorial Blogger.

Jika Anda menulis JavaScript sebagai contoh:

<pre><code class="language-javascript">
console.log('Contoh kode');
</code></pre>

kode tersebut hanya ditampilkan kepada pembaca. Browser tidak akan menjalankannya karena berada di dalam elemen code block.

Sementara itu, JavaScript yang benar-benar harus dijalankan perlu ditempatkan sebagai elemen <script> di lokasi implementasi yang sesuai pada template.

Cara Membuat Tombol Copy Code pada Semua Code Block

Jika Anda ingin semua code block mempunyai Copy Code tanpa menambahkan tombol secara manual satu per satu, struktur HTML dapat dibuat atau dimodifikasi oleh JavaScript.

Contoh pendekatan sederhana:

<script>
document.querySelectorAll('pre[class*="language-"], pre code[class*="language-"]')
  .forEach(function (element) {
    var pre = element.tagName.toLowerCase() === 'pre'
      ? element
      : element.closest('pre');

    if (!pre || pre.dataset.copyReady === 'true') {
      return;
    }

    pre.dataset.copyReady = 'true';

    var button = document.createElement('button');
    button.type = 'button';
    button.className = 'ds-copy-auto';
    button.textContent = 'Copy Code';

    button.addEventListener('click', async function () {
      var code = pre.querySelector('code');

      if (!code) {
        return;
      }

      try {
        await navigator.clipboard.writeText(code.textContent);
        button.textContent = 'Copied';

        setTimeout(function () {
          button.textContent = 'Copy Code';
        }, 1500);
      } catch (error) {
        button.textContent = 'Copy gagal';
      }
    });

    pre.parentNode.insertBefore(button, pre);
  });
</script>

Metode otomatis seperti ini lebih praktis, tetapi Anda perlu menyesuaikan CSS dan selector dengan struktur template. Untuk blog yang mempunyai struktur artikel kompleks, metode tombol manual dapat lebih mudah dikontrol.

Apakah Copy Code Wajib Ditambahkan?

Tidak. Syntax highlighting dan Copy Code adalah dua fitur terpisah. Jika blog Anda hanya mempunyai contoh kode pendek, tombol copy mungkin tidak terlalu diperlukan.

Namun, untuk tutorial dengan code block panjang, fitur copy dapat mengurangi pekerjaan pembaca karena mereka tidak perlu menyeleksi seluruh kode secara manual.

Cara Membuat Syntax Highlighter Tetap Ringan

Tujuan utama artikel ini bukan hanya membuat kode berwarna, tetapi membuat fitur tersebut tetap masuk akal dari sisi performa.

Beberapa langkah yang dapat dilakukan:

• Gunakan satu library syntax highlighter.
• Gunakan file minified.
• Muat bahasa yang memang digunakan.
• Hindari plugin yang tidak diperlukan.
• Gunakan CSS sederhana untuk tambahan style.
• Gunakan JavaScript Copy Code yang singkat.
• Hindari menambahkan beberapa library ikon hanya untuk tombol.

Prism juga menyediakan mekanisme untuk memilih bahasa dan plugin sesuai kebutuhan. Untuk blog yang hanya menggunakan sedikit bahasa, tidak ada alasan untuk memuat seluruh ekosistem bahasa apabila tidak diperlukan.

Apakah Syntax Highlighter Memengaruhi Kecepatan Blog?

Setiap file CSS dan JavaScript tambahan tetap merupakan bagian dari halaman yang perlu dipertimbangkan. Karena itu, dampaknya bergantung pada implementasi keseluruhan template.

Syntax highlighter yang menggunakan library, tema, dan plugin lebih sedikit tentu mempunyai dependensi lebih sederhana dibanding pemasangan yang menggunakan banyak komponen tambahan.

Selain itu, performa blog tidak hanya dipengaruhi syntax highlighter. Gambar, widget, font, iklan, script lain, dan struktur template juga harus dievaluasi sebagai satu kesatuan.

Cara Menguji Performa Setelah Memasang Prism.js

Setelah pemasangan selesai, buka beberapa artikel yang mempunyai banyak code block dan beberapa artikel tanpa kode. Bandingkan perilaku halaman dan pastikan penambahan library tidak menimbulkan masalah visual.

Perhatikan terutama:

• Apakah halaman tetap dapat dimuat dengan baik?
• Apakah code block tampil sesuai harapan?
• Apakah ada error JavaScript?
• Apakah layout bergeser?
• Apakah mobile mengalami horizontal overflow?
• Apakah tombol Copy Code tetap bekerja?

Cara Menggunakan Syntax Highlighter pada Artikel Tutorial Blogger

Setelah library aktif, buat format artikel yang konsisten. Misalnya ketika menjelaskan CSS, tampilkan kode CSS di bawah penjelasan lalu lanjutkan dengan penjelasan fungsi setiap bagian.

Jangan hanya memberikan code block tanpa konteks. Pembaca pemula membutuhkan penjelasan tentang tempat pemasangan kode, fungsi setiap bagian, dan hasil yang diharapkan setelah kode diterapkan.

Dengan begitu, syntax highlighting menjadi alat bantu pembelajaran, bukan hanya elemen dekoratif.

Contoh Struktur Tutorial yang Menggunakan Code Block

Struktur artikel tutorial dapat dibuat seperti berikut:

1. Jelaskan tujuan fitur.
2. Jelaskan lokasi pemasangan.
3. Tampilkan kode.
4. Jelaskan bagian kode yang penting.
5. Jelaskan cara menyimpan perubahan.
6. Jelaskan cara menguji hasilnya.
7. Berikan solusi jika terjadi error.

Struktur seperti ini membuat pembaca tidak hanya menyalin kode, tetapi memahami bagaimana kode tersebut digunakan.

Cara Mengatur Jarak Antar Code Block

Jika artikel berisi banyak contoh kode, jarak antar blok perlu dibuat konsisten.

.post-body pre[class*="language-"] {
  margin-top: 20px;
  margin-bottom: 24px;
}

Jangan memberikan margin yang terlalu besar karena akan membuat artikel terasa terputus-putus. Jarak sebaiknya mengikuti ritme paragraf dan heading.

Cara Mengatur Font Code Block

Kode sebaiknya menggunakan font monospace agar karakter mempunyai pola visual yang konsisten.

.post-body pre[class*="language-"],
.post-body code[class*="language-"] {
  font-family: Consolas, Monaco, "Courier New", monospace;
}

Ukuran font harus disesuaikan dengan desain template. Terlalu kecil akan menyulitkan pembaca smartphone, sedangkan terlalu besar akan membuat sedikit kode membutuhkan banyak ruang vertikal.

Cara Menghindari Konflik dengan Style Inline pada Blogger

Beberapa template Blogger mempunyai CSS yang cukup agresif terhadap elemen pre dan code. Jika syntax highlighter terlihat aneh setelah dipasang, periksa aturan seperti white-space, word-break, overflow, background, dan color.

Jangan langsung menambahkan banyak !important. Cari terlebih dahulu selector template yang menyebabkan konflik lalu buat aturan CSS tambahan yang spesifik.

Apakah Bisa Membuat Syntax Highlighting Berbeda untuk Setiap Bahasa?

Bisa. Prism menyediakan grammar berbeda berdasarkan class bahasa. CSS dapat digunakan untuk mengubah elemen umum code block maupun style tertentu yang membedakan kebutuhan visual.

Namun, sebaiknya jangan membuat setiap bahasa mempunyai desain yang sangat berbeda. Konsistensi visual tetap penting agar pembaca memahami bahwa semua code block merupakan bagian dari sistem yang sama.

Pengembangan Lanjutan Syntax Highlighter Blogger

Setelah implementasi dasar berjalan, Anda dapat mengembangkan sistem sesuai kebutuhan blog.

Beberapa pengembangan yang masih berkaitan langsung dengan fitur ini adalah:

• Syntax Highlighter dengan dark mode.
• Tombol Copy Code.
• Code block responsive.
• Nomor baris pada kode.
• Highlight baris tertentu.
• Label bahasa pada code block.
• Desain khusus untuk HTML, CSS, dan JavaScript.
• Integrasi syntax highlighting dengan template Blogger custom.

Untuk setiap pengembangan, pertimbangkan apakah fitur tersebut benar-benar dibutuhkan sebelum menambahkan plugin baru.

Cara Membuat Label Bahasa pada Code Block

Jika ingin pembaca langsung mengetahui jenis kode, Anda dapat menambahkan label sederhana di atas code block.

<div class="ds-code-box">
  <div class="ds-code-label">CSS</div>

  <pre>
    <code class="language-css">
      .box {
        padding: 20px;
      }
    </code>
  </pre>
</div>

Label seperti ini dapat membantu terutama ketika satu artikel mempunyai banyak bahasa yang berbeda.

Cara Membuat Code Block Tetap Nyaman pada Dark Mode

Jika template memiliki dark mode, jangan hanya membalik warna background seluruh halaman. Code block mempunyai sistem warna token sendiri.

Gunakan tema Prism yang memang cocok untuk latar gelap atau sesuaikan token melalui CSS. Pastikan warna komentar, tag, string, angka, dan keyword tetap dapat dibedakan.

Kapan Sebaiknya Tidak Menggunakan Prism.js?

Jika blog hampir tidak pernah menampilkan kode, Anda mungkin tidak membutuhkan syntax highlighter. Code block standar menggunakan <pre><code> dapat menjadi solusi yang lebih sederhana.

Prism.js menjadi lebih masuk akal ketika blog memang rutin menerbitkan tutorial coding, template Blogger, HTML, CSS, JavaScript, XML, atau dokumentasi teknis lainnya.

Prinsipnya sederhana: gunakan fitur ketika manfaatnya sesuai dengan kebutuhan website.

Checklist Pemasangan Syntax Highlighter Blogspot

• Template sudah dicadangkan sebelum diedit.
• CSS Prism.js sudah dipasang.
• JavaScript Prism.js sudah dipasang.
• Class bahasa digunakan sesuai kode.
• Kode HTML sudah di-escape.
• Code block menggunakan <pre><code>.
• Code block mempunyai overflow-x: auto.
• Layout sudah diuji pada smartphone.
• Prism tidak bertabrakan dengan syntax highlighter lama.
• Jumlah bahasa yang dimuat sesuai kebutuhan.
• Tombol Copy Code diuji apabila digunakan.
• Tidak terdapat error JavaScript pada halaman.
• Tampilan code block sesuai dengan template Blogger.

Kesimpulan

Syntax highlighter Blogspot dapat membuat artikel tutorial coding jauh lebih mudah dibaca. Dengan Prism.js, kode HTML, CSS, JavaScript, XML, dan JSON dapat ditampilkan menggunakan syntax highlighting sehingga pembaca lebih mudah mengenali struktur dan bagian penting dari kode.

Proses pemasangannya dapat dimulai dengan menambahkan CSS dan JavaScript Prism.js pada template Blogger, kemudian menggunakan struktur <pre><code> dengan class bahasa yang sesuai pada artikel. Untuk kode HTML dan XML, jangan lupa melakukan escaping agar markup tidak diproses sebagai elemen halaman.

Selain pewarnaan sintaks, responsive code block juga sangat penting. Gunakan overflow-x: auto dan batas lebar yang sesuai agar baris kode panjang dapat digeser secara horizontal tanpa merusak layout blog.

Untuk artikel tutorial yang banyak memberikan kode, Anda juga dapat menambahkan tombol Copy Code menggunakan JavaScript sederhana. Fitur tersebut dapat membantu pembaca menyalin kode tanpa harus melakukan seleksi manual dari awal hingga akhir.

Dari sisi performa, gunakan library dan plugin seperlunya. Blog yang hanya membahas beberapa jenis bahasa tidak harus memuat seluruh grammar dan fitur Prism. Semakin terarah implementasinya, semakin mudah sistem tersebut dipelihara bersama template Blogger lainnya.

Setelah syntax highlighter terpasang, Anda dapat mengembangkan fitur lanjutan seperti dark mode, nomor baris, highlight baris tertentu, label bahasa, tombol Copy Code, maupun desain code block yang mengikuti tampilan template. Dengan fondasi yang benar, berbagai fitur tersebut dapat ditambahkan secara bertahap tanpa mengubah konsep utama code block.

Temukan Template Blogger dan Tools untuk Blog Anda

yang dapat membantu menyesuaikan tampilan serta kebutuhan website Anda.

kunjungi damarsatria.web.id

FAQ Seputar Syntax Highlighter Blogspot

Apakah Prism.js bisa digunakan untuk syntax highlighter Blogger?

Bisa. Prism.js dapat digunakan sebagai library syntax highlighting pada halaman Blogger. Setelah library dipasang pada template, code block dapat menggunakan class bahasa yang sesuai agar sintaks diproses oleh Prism.

Bagaimana cara menampilkan kode HTML di Blogger agar tidak dijalankan browser?

Gunakan elemen <pre><code> dan lakukan escaping pada karakter HTML seperti < dan >. Dengan begitu, tag HTML ditampilkan sebagai teks kepada pembaca, bukan diproses sebagai elemen halaman.

Bagaimana cara membuat code block Blogger responsive?

Gunakan batas lebar seperti max-width: 100% dan overflow-x: auto pada elemen code block. Dengan cara tersebut, baris kode yang panjang dapat digeser secara horizontal tanpa memaksa seluruh halaman melebar.

Apakah syntax highlighter bisa menampilkan CSS dan JavaScript?

Bisa. Gunakan class language-css untuk CSS dan language-javascript untuk JavaScript. Prism kemudian menggunakan grammar yang sesuai untuk memberikan syntax highlighting.

Apakah tombol Copy Code bisa ditambahkan ke Prism.js?

Bisa. Tombol Copy Code dapat dibuat menggunakan JavaScript sederhana yang membaca textContent dari elemen code lalu menyalinnya menggunakan Clipboard API. Tombol tersebut dapat dibuat manual pada setiap code block atau ditambahkan secara otomatis menggunakan script.

Apakah memasang Prism.js membuat loading Blogger menjadi berat?

Prism.js menambah file CSS dan JavaScript ke halaman, sehingga implementasinya tetap perlu diperhitungkan dalam optimasi. Untuk menjaga sistem tetap sederhana, gunakan library, bahasa, tema, dan plugin yang memang dibutuhkan.

Kenapa syntax highlighter tidak bekerja setelah dipasang di Blogger?

Periksa apakah CSS dan JavaScript Prism berhasil dimuat, class bahasa sudah benar, struktur code block menggunakan <pre><code>, dan tidak ada library syntax highlighting lain yang bertabrakan dengan Prism.