Cara Membuat Syntax Highlighter Berwarna Dengan Tombol Copy Code di Blog

Warkasa1919

September 24, 2025 Januari 09, 2023

Cara Membuat Syntax Highlighter Berwarna dengan Tombol Copy Code di Blog

Apakah kamu sering menulis tutorial pemrograman atau berbagi potongan kode di blog? Agar artikel terlihat profesional, kamu perlu menambahkan syntax highlighter berwarna lengkap dengan tombol "Copy Code". Fitur ini tidak hanya membuat kode lebih mudah dibaca, tetapi juga memudahkan pengunjung untuk menyalin kode tanpa ribet.

Di artikel ini, kita akan membahas cara memasang syntax highlighter berwarna dan tombol copy code di blog (khususnya Blogspot/WordPress) yang SEO-friendly, ringan, dan responsif di semua perangkat.

Kenapa Syntax Highlighter Penting?

Meningkatkan pengalaman pembaca – kode lebih jelas dan mudah dipahami.
Membuat blog terlihat profesional – tampil seperti situs developer besar.
Memudahkan pembaca – cukup klik tombol Copy Code untuk menyalin script.
SEO On-Page lebih baik – struktur kode tertata rapi dan mudah diindeks Google.

Cara Membuat Syntax Highlighter dengan Copy Code di Blogspot

Kita akan menggunakan Prism.js, library populer yang ringan, cepat, dan mudah digunakan.

1. Tambahkan Script Prism.js

Buka Dashboard Blogger → Tema → Edit HTML, lalu tambahkan kode berikut di atas </head>:

<!-- ✅ Prism.js Syntax Highlighter -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css"/>

2. Tambahkan CSS Custom agar Lebih Keren

Letakkan di bawah kode <style> atau di Custom CSS Blogger:

/* ✅ Custom Style Prism.js */
pre[class*="language-"] {
  border-radius: 10px;
  padding: 15px;
  font-size: 14px;
  background: #1e1e1e;
  color: #fff;
  overflow-x: auto;
}
code[class*="language-"] {
  font-family: "Fira Code", monospace;
}
div.code-toolbar > .toolbar {
  opacity: 1;
  right: 10px;
  top: 10px;
}
div.code-toolbar > .toolbar button {
  background: #007bff;
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  padding: 5px 10px;
  transition: 0.3s;
}
div.code-toolbar > .toolbar button:hover {
  background: #0056b3;
}

3. Gunakan Syntax Highlighter di Artikel

Saat menulis artikel, gunakan format berikut:

<pre><code class="language-html">
<!-- Contoh kode HTML -->
<div class="container">
  <h1>Hello World</h1>
</div>
</code></pre>

Contoh untuk JavaScript:

<pre><code class="language-js">
// Contoh kode JavaScript
function helloWorld() {
  alert("Hello, World!");
}
helloWorld();
</code></pre>

Hasilnya

Kode tampil dengan warna berbeda sesuai bahasa pemrograman.
Ada tombol "Copy" otomatis di pojok kanan atas.
Desain responsif dan ringan untuk semua perangkat.

Tips SEO Tambahan

Gunakan alt dan title pada gambar tutorial.
Tambahkan kata kunci syntax highlighter blogspot, tombol copy code, prism.js secara natural.
Gunakan heading terstruktur (H2, H3) seperti artikel ini.

Kesimpulan

Dengan syntax highlighter berwarna + tombol copy code, blog kamu akan terlihat lebih profesional, mudah dibaca, dan ramah SEO. Cukup dengan Prism.js, semua kode di artikel bisa tampil rapi tanpa membuat blog berat.

✅ Syntax Highlighter Berwarna dengan Copy Code (Versi Ringan, Offline)

1. Tambahkan CSS di Template Blogger

Letakkan di antara tag <style> ... </style> di template:

/* ✅ Syntax Highlighter Offline - Warkasa1919 */
pre {
  background: #1e1e1e;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 14px;
  font-family: "Fira Code", monospace;
  position: relative;
}

pre code {
  display: block;
  white-space: pre;
  line-height: 1.5em;
}

/* Tombol Copy */
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.3s;
}
.copy-btn:hover {
  background: #0056b3;
}

/* Warna sintaks sederhana */
.token.tag { color: #ff79c6; }
.token.attr-name { color: #50fa7b; }
.token.attr-value { color: #f1fa8c; }
.token.keyword { color: #8be9fd; }
.token.string { color: #f1fa8c; }
.token.function { color: #50fa7b; }
.token.comment { color: #6272a4; font-style: italic; }

2. Tambahkan Script JavaScript di Footer Template

Letakkan sebelum </body>:

<!-- ✅ Script Copy Code - Warkasa1919 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("pre").forEach(function (block) {
    let btn = document.createElement("button");
    btn.innerText = "Copy";
    btn.className = "copy-btn";
    block.appendChild(btn);

    btn.addEventListener("click", function () {
      let code = block.querySelector("code").innerText;
      navigator.clipboard.writeText(code).then(() => {
        btn.innerText = "Copied!";
        setTimeout(() => (btn.innerText = "Copy"), 2000);
      });
    });
  });
});
</script>

3. Cara Menulis Kode di Artikel

Cukup gunakan format seperti ini di artikel blog:

<pre><code class="language-html">
<!-- Contoh kode HTML -->
<div class="container">
  <h1>Hello Warkasa1919</h1>
</div>
</code></pre>

Untuk JavaScript:

<pre><code class="language-js">
// Contoh kode JavaScript
function halo() {
  alert("Halo dari Warkasa1919!");
}
halo();
</code></pre>

🚀 Hasil Fitur:

Kode tampil berwarna (HTML, CSS, JS, dll).
Ada tombol Copy Code di kanan atas.
Ringan karena tanpa CDN, script dan CSS langsung di template.
SEO-friendly & responsif di semua perangkat.