Cara Membuat Kotak Highlighter di Blogger

ByMukhlis MJ

Menambahkan kotak highlighter pada blog Blogger Anda adalah cara yang bagus untuk menampilkan kode pemrograman dengan format yang rapi dan mudah dibaca. Dalam panduan ini, saya akan menunjukkan cara membuat kotak highlighter dengan tombol salin menggunakan Highlight.js. Langkah-langkah berikut akan membantu Anda menambahkan fitur ini ke blog Anda dengan mudah.

kotak highlighter

Langkah 1: Tambahkan Highlight.js ke Template Blogger

Pertama, kita perlu menambahkan library Highlight.js ke template Blogger Anda. Library ini akan membantu kita untuk memberikan sintaks penyorotan pada kode pemrograman.

  1. Masuk ke dasbor Blogger Anda.
  2. Pilih blog yang ingin Anda tambahkan fitur highlighter.
  3. Klik Tema di menu sebelah kiri, lalu pilih Edit HTML.
  4. Tambahkan kode berikut di dalam tag <head> :
JavaScript

<!-- Highlight.js CSS dengan tema Dracula -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/dracula.min.css' rel='stylesheet'/>

Langkah 2: Tambahkan CSS untuk Styling

Setelah menambahkan Highlight.js, kita perlu menambahkan CSS untuk menata tampilan kotak highlighter. Masih di dalam tag <head>, tambahkan kode CSS berikut:

css dan javascript


<style>
  .code-container {
    position: relative;
    background-color: #282a36;
    border-radius: 8px;
  	border: 2px solid #000000;
    overflow: hidden;
  }

  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #44475a;
    color: #f8f8f2;
    padding: 10px;
  	margin-bottom: -20px;
    font-family: &#39;Courier New&#39;, Courier, monospace;
  }

  .code-header .title {
    font-size: 14px;
  }

  .code-header .copy-button {
    background-color: #2986cc;
    color: #f8f8f2;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
  }

  .code-header .copy-button:hover {
    background-color: #16537e;
  }

  pre, code {
    background-color: #0F0F0F !important;
    color: #f8f8f2;
    font-family: &#39;Courier New&#39;, Courier, monospace;
    font-size: 8px; /* Atur sesuai keinginan */
    padding: 0;
    margin: 0;
    white-space: pre; /* Pastikan teks tidak wrap */
    overflow-x: auto; /* Tambahkan scroll horizontal jika diperlukan */
    overflow-y: auto; /* Tambahkan scroll vertikal jika diperlukan */
    line-height: 1.5; /* Mengatur jarak baris */
  }

  pre {
    max-height: 300px; /* Batas tinggi kotak agar bisa di-scroll */
  }

  /* Additional styles to ensure code syntax highlighting is visible on black background */
  .hljs-comment,
  .hljs-quote {
    color: #6272a4;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-subst {
    color: #ff79c6;
  }

  .hljs-literal,
  .hljs-number,
  .hljs-attribute,
  .hljs-doctag {
    color: #bd93f9;
  }

  .hljs-string,
  .hljs-selector-attr,
  .hljs-selector-pseudo,
  .hljs-addition {
    color: #f1fa8c;
  }

  .hljs-title,
  .hljs-section,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-meta {
    color: #50fa7b;
  }

  .hljs-regexp,
  .hljs-link {
    color: #ffb86c;
  }

  .hljs-symbol,
  .hljs-variable,
  .hljs-template-variable,
  .hljs-code,
  .hljs-deletion {
    color: #ff5555;
  }

  .hljs-title,
  .hljs-type {
    color: #8be9fd;
  }

  .hljs-name,
  .hljs-selector-id,
  .hljs-selector-class {
    color: #ffb86c;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }
</style>

<!-- Highlight.js JavaScript -->
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js'/>
<script>hljs.highlightAll();</script>

<!-- JavaScript untuk menghapus whitespace pada blok kode -->
<script>
  document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
    document.querySelectorAll(&#39;pre code&#39;).forEach(function(codeBlock) {
      codeBlock.innerHTML = codeBlock.innerHTML.trim();
    });
  });
</script>

Langkah 3: Tambahkan Tombol Salin

Kita juga akan menambahkan tombol salin di setiap kotak highlighter. Tambahkan kode JavaScript berikut di dalam tag <head> :

JavaScript

<!-- JavaScript untuk Tombol Salin -->
<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.code-container').forEach((container) => {
      const button = container.querySelector('.copy-button');
      const code = container.querySelector('pre code').innerText;

      button.addEventListener('click', () => {
        navigator.clipboard.writeText(code).then(() => {
          button.innerText = 'Copied!';
          setTimeout(() => {
            button.innerText = 'Copy';
          }, 2000);
        });
      });
    });
  });
</script>

Langkah 4: Tambahkan Blok Kode di Postingan Blog

Sekarang, setiap kali Anda ingin menambahkan blok kode dengan highlighter di postingan blog, gunakan format HTML berikut dan pastikan Anda sudah memparse kode HTML sebelum menambahkannya ke dalam editor postingan:

Parse Html

Untuk memparse kode html nya kalian bisa kesini –> Parse HTML

html

<div class="code-container">
  <div class="code-header">
    <span class="title">JavaScript</span>
    <button class="copy-button">Copy</button>
  </div>
  <pre><code class="language-javascript">
  
//SIMPAN KODE KALIAN DISINI...!!!

  </code></pre>
</div>

Kalau kalian ga pengen ada headernya, kamu cukup pakek script ini aja:


  
<pre><code>
  
//SIMPAN KODE KALIAN DISINI...!!!

</code></pre>

Pastikan untuk mengganti language-javascript dengan bahasa pemrograman yang sesuai, seperti:

  • language-html, 
  • language-css, atau 
  • language-python.

Untuk membungkus kode-kode kalian pada blogger pastikan kalian masuk ke mode Tampilan HTML.

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan kotak highlighter dengan tombol salin ke blog Blogger Anda. Ini akan membuat postingan kode Anda lebih rapi dan mudah dibaca oleh pengunjung. Jangan ragu untuk menyesuaikan gaya CSS sesuai dengan preferensi Anda.

Selamat mencoba dan semoga berhasil!

Similar Posts