Cara Membuat Syntax Highlighter di Blogger

Keberadaan Syntax Highlighter di blogger merupakan salah satu cara yang dapat memperindah tampilan blog. Selain bisa memperindah tampilan blog, keberadaan Syntax Highlighter di blog juga akan membuat blog terkesan prosefional.

Dan pemasangan syntax highlighter juga dapat mempermudah pengunjung dalam membaca jenis kode yang tertulis di dalam postingan.

Apa lagi jika blog anda merupakan media blog yang mempunyai niche tentang tutorial, maka keberadaan syntax highlighter ini sangat penting, karena akan mempermudah pengunjung untuk mengambil kode atau script yang mereka perlukan .

Syntax Highlighter merupakan fitur khusus text editor yang menyoroti penulisan berbagai jenis bahasa pemrograman, agar tulisan tersebut mudah untuk dibaca dan dipelajari. Oleh karena itu keberadaan syntax highlighter sangatlah penting bagi blog yang mempunyai niche tentang tutorial.

Bagaimana Cara kerjanya Syntax Highlighter

Cara kerjanya dari syntax highlighter sebenarnya hampir sama dengan blockquote. Akan tetapi yang membedakan antara keduanya adalah untuk warna teks pada fitur blockquote hanya ada satu warna saja dan untuk merubahnya harus dilakukan dengan cara manual melalui menu postingan.

Sedangkan pada fitur Syntax highlighter, teks yang ada didalamnya bisa di setting secara otomatis mempunyai warna yang berbeda sesuai bahasa pemrograman itu sendiri. Nah dari situlah perbedaan antara blockquote dan syntax highlighter.

Berikut adalah contoh tampilan syntax highlighter yang bisa menampilkan kode HTML atau Javascript Css di dalam box berwarna warni pada postingan.

Cara Memasang Syntax Highlighter Keren di Blogger

Contoh syntax highlighter dengan tampilan warna warni

Kalau dibawah ini merupakan contoh syntax highlighter dengan tampilan yang simpel tanpa warna warni

Contoh syntax highlighter dengan tampilan simpel tanpa warna warni

Dan pada kesempatan kali ini saya akan berbagi pengalaman kepada rekan rekan blogger semuanya, yakni tentang cara membuat dan memsang syntax highlighter dengan tampilan warna warni. Dan juga syntax highlighter dengan tampilan simpel tanpa warna warni. Untuk panduanya mari kita simak terus artikel ini sampai selesai.

Cara Memasang Syntax Highlighter di Blogger

Sebelum anda memasang Syntax Highlighter diblogger, pastikan didalam template blog sudah ditambahkan jquery library. Dan berikut ini adalah contoh jquery library yang saya maksudkan.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Langkah selanjutnya silahkan anda Login atau Masuk ke akun blogger anda masing masing. Pilih menu tema lalu Edit Html dan paste kode Css berikut tepat di atas tag </head> didalam template blog anda

<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>

Selanjutnya tambahkan kode Javascript berikut sebelum kode </body> didalam menu Editor template blog anda.

<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawcdn.githack.com/muhamadmiftahul/Kang-Tutorial/444c1f0475610932f0a3c26085be19076b3d930c/highlighter.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Setelah melakukan tiga step diatas, sekarang klik simpan atau save tema. Dengan demikian kini blog anda sudah terpasang syntax highlighter dengan tampilan warna warni.

Cara Menggunakan Syntax Highlighter di Postingan Blog

Setelah sukses memasang kode syntax highlighter didalam template blog. Lalu bagaimana cara menggunakanya?

Cara menggunakanya pun juga sangat mudah, ketika anda sedang menulis artikel yang akan menyisipkan kode script seperti (CSS, HTML, atau javascript), pastikan kode tersebut sudah diparse terlebih dahulu, agar kode HTML atau Javascript dapat berfungsi dengan semestinya dan bisa terbaca di artikel. Untuk memparse kode html agar bisa terbaca di postingan artikel, anda bisa menggunakan Alat Tool Parsing Secara Gratis

Setelah itu silahkan anda membuat postingan baru seperti biasa, namun dalam mode penulisan. Pilih mode HTML jangan mode Menulis, dan untuk memanggil syntax highlighter gunakan markup HTML dengan format seperti berikut ini sobat.

<pre><code>
Letakkan Kode apa saja Disini (HTML, CSS, Javascript) yang sudah diparse.
</code></pre>

Secara keseluruhan pemasangan Syntax Highlighter di blogger sudah selesai, dan anda bisa menggunakanya untuk berbagi sebuah kode HTML, javascript dan lain lain di dalam postingan artikel blog anda

Syntax Highlighter Dengan Menampilkan Tombol Salin Secara Otomatis

Menurut saya kode syntax highlighter di atas itu sudah cukup baik dan penggunaanya pun juga cukup mudah, akan tetapi ini terkadang masih menyulitkan bagi para pengunjung dalam pengambilan kode atau css yang kita bagikan, yang mana pengunjung masih menscroll secara manual untuk mengambil kode

Nah berikut saya akan membagikan sebuah tutorial sederhana, yaitu cara membuat syntax highlighter dengan menampilkan tombol salin secara otomatis di bagian pojok kanan atas, kurang lebihnya seperti contoh berikut tampilanya

Cara Membuat Syntax Highlighter Dengan Tombol Salin Secara Otomatis

Untuk membuat syntax highlighter yang bisa menampilkan tombol salin kode secara otomatis, Caranya juga tidaklah susah dan hampir sama dengan tutorial pertama yang sudah kita bahas di atas, yuk tidak usah berlama lama langsung saja kita masuk ke tutorialnya.

Silahkan anda salin kode CSS berikut lalu letakan di atas ]]></b:skin> di dalam template blog anda


.code-block {
  position: relative;
  border-radius: 5px;
  overflow: auto;
  margin: 1em 0;
  border: 1px solid #ddd;
  max-height: 300px;
  background: #f9f9f9;
}

.code-block pre {
  white-space: pre;
  margin: 0;
  padding: 1em;
  overflow: auto;
}

.code-block code {
  display: block;
  white-space: pre;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* Label bahasa */
.code-label {
  position: absolute;
  top: 8px;
  left: 10px;
  background: #f1f1f1;
  color: #333;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: #137faa;
  color: white;
  border: none;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}

Selanjutnya masih di dalam editor template, Cari kode </body> setelah ketemu, salin kode javascript berikut dan letakan tepat di atasnya


<!-- Prism JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'/>

<!-- Otomatisasi Copy Button & Label -->
<script>
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
  const blocks = document.querySelectorAll(&quot;pre &gt; code&quot;);
  blocks.forEach(code =&gt; {
    const pre = code.parentElement;

    // Bungkus dengan .code-block
    const wrapper = document.createElement(&quot;div&quot;);
    wrapper.className = &quot;code-block&quot;;

    // Buat label bahasa
    const lang = code.className.replace(&quot;language-&quot;, &quot;&quot;) || &quot;code&quot;;
    const label = document.createElement(&quot;div&quot;);
    label.className = &quot;code-label&quot;;
    label.textContent = lang;

    // Buat tombol salin
    const button = document.createElement(&quot;button&quot;);
    button.className = &quot;copy-btn&quot;;
    button.textContent = &quot;Salin kode&quot;;
    button.addEventListener(&quot;click&quot;, function () {
      navigator.clipboard.writeText(code.innerText).then(() =&gt; {
        button.textContent = &quot;Tersalin!&quot;;
        setTimeout(() =&gt; {
          button.textContent = &quot;Salin kode&quot;;
        }, 2000);
      });
    });

    // Sisipkan elemen
    pre.parentNode.insertBefore(wrapper, pre);
    wrapper.appendChild(label);
    wrapper.appendChild(button);
    wrapper.appendChild(pre);
  });
});
</script>

Untuk cara penggunaanya di postingan blogger juga sangat simpel dan sangat mudah, tidak perlu banyak memakan kode html, cukup dengan menggunakan kode html pemanggil CSS seperti berikut.


<pre><code class="language-html">
Silahkan masukan kode htlm, javascript CSS yang sudah di parse disini
</code></pre>

KETERANGAN :
Kode syntax highlighter warna warni atau syntax highlighter yang menampilkan tombol salin kode otomatis diatas, menggunakan javascript, dan kemungkinan bisa memberatkan blog anda saat diakses.

Namun jika anda termasuk pengguna template sejenis viomagz tidak jadi masalah, karena ditemplate viomagz sudah terpasang script lazy load didalamnya. Jadi kode javascript syntax highlighter warna warni yang saya bagikan ini tidak akan terlalu mempengaruhi pada kecepatan blog anda.

Atau anda ingin memasang syntax highlighter yang simpel dan ringan tanpa menggunakan javascript, silahkan anda Copy kode CSS berikut dan paste diatas kode ]]></b:skin> didalam template blog anda.

.pre,pre code{color:#333333}pre{background:#f7f7f7;padding:10px 15px;overflow:auto;max-width:100%;text-align:left;margin:10px auto;border-left:5px solid #0000ff}code,pre,pre code{max-height:250px; font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}code{color:#3d3d3d}i.klik-url,pre{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}

Setelah itu jangan lupa klik simpan atau save template blog anda. Untuk cara penggunaanya sama saja dengan syntax highlighter warna warni yang pertama, cukup menggunakan markup HTML dengan format seperti berikut.

<pre><code>
Letakkan Kode apa saja Disini (HTML, CSS, Javascript) yang sudah diparse.
</code></pre>

Kesimpulan

Memasang syntax highlighter warna-warni di Blogger bukan hanya mempercantik tampilan kode yang ditampilkan, tetapi juga memberikan pengalaman membaca yang lebih nyaman bagi pengunjung, terutama bagi mereka yang sedang mempelajari kode. Dengan menggunakan plugin atau library seperti Prism.js, Highlight.js, atau solusi kustom lainnya, kita bisa menampilkan potongan kode dengan warna yang menarik dan mudah dipahami.

Langkah-langkah yang telah dijelaskan mulai dari memasukkan CSS dan JavaScript ke dalam template Blogger, hingga cara menuliskan kode di dalam postingan, merupakan pondasi penting agar syntax highlighter berfungsi dengan baik. Pastikan juga untuk selalu menguji tampilan di berbagai perangkat dan browser agar hasilnya konsisten.

Dengan menerapkan syntax highlighter secara tepat, blog Anda akan terlihat lebih profesional, terutama jika niche blog Anda berkaitan dengan tutorial pemrograman, teknologi, atau pengembangan web. Selamat mencoba, dan semoga blog Anda semakin menarik dan bermanfaat bagi para pembaca

Penutup

Demikianlah panduan lengkap mengenai cara memasang syntax highlighter warna-warni di Blogger. Semoga tutorial ini bisa membantu Anda dalam memperindah tampilan kode di blog dan membuat konten Anda lebih mudah dipahami oleh pembaca.

Jika Anda mengalami kendala dalam proses pemasangan atau ingin bertanya seputar kustomisasi syntax highlighter, jangan ragu untuk meninggalkan komentar di bawah. Terima kasih sudah membaca, dan sampai jumpa di tutorial Blogger selanjutnya