Menggunakan Highlight.js untuk menampilkan Code pada Blogspot

Hai sobat kelas mat, kali ini kelas mat membuat selingan artikel mengenai tutorial bagaimana cara menggunakan Higlight.js untuk menampilkan Kode-kode programing pada blogspot dengan beberbagai model style yang bisa kamu pilih sendiri.
Sebelum kita mulai Menggunakan Highlight.js untuk menampilkan Code pada Blogspot, Coba kamu lihat dulu contoh penampilan dari highlight.js di bawah ini:

Bagaimana Keren bukan? mau tau cara buatnya? kalo mau, Yuk lanjutkan membacanya.

Tentang Highlight.js

Highlight.js sendiri merupakan syntax highlighter yang ditulis dalam javascript dan suport pada semua browser. Yang menjadi keunggulan utama dari highlight.js ini adalah dapat mendeteksi secara otomatis bahasa apa yang sedang di tuliskan. Berikut ini adalah pengertian sebenarnya:

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection

Adapun keunggulan-keunggulan dari higlight.js tersebut diantaranya adalah :

1. Mendukung 189 bahasa dan 91 gaya/Style
2. dapat mendeteksi bahasa pemograman secara otomatis
3. penyorotan kode multi-bahasa
4. tersedia untuk node.js
5. bekerja dengan markup apa pun
6. kompatibel dengan framework js

Menyiapkan Highlight.js pada blogspot

Untuk dapat menggunakan Highlight.js pada blog kamu, terlebih dahulu silahkan copykan kode berikut ini di atas kode </head> blog kamu.

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/styles/default.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/highlight.min.js"></script>

Perhatikan kata default yang saya beri tanda kuning. itu adalah style default atau style standar. Untuk mendapatkan style yang kamu inginkan silahkan ganti kata default tadi dengan nama style kesukaan mu. Lihat daftar {getButton} $text={Demo} $icon={preview}. Di bawah ini saya berikan contoh akan menggunakan style monokai-sublime. Maka Cara menggantinya tinggal di copy saja nama style monokai-sublime nya. lihat gambar.
Ganti kata default tadi dengan monokai-sublime. Sehingga nantinya akan menjadi seperti ini :

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/styles/monokai-sublime.min.css" rel="stylesheet">

Kemudian, masih dalam edit html blog kamu, Carilah kode </body>. Gunakan saja ctrl + F untuk mempermudah mencarinya. Kalau sudah ketemu, copykan kode berikut ini dan taro di atas kode </body> tadi.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});
</script>

Sehingga akan menjadi seperti ini:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});
</script>
</body>

Cara Penerapan Highlight.js pada postingan

untuk dapat menggunakannya, kamu cukup mengawalinya dengan tanda <pre><code class="html"> dan mengakhirinya dengan </code></pre>. Lihat contoh berikut ini.

Untuk Menampilkan Kode CSS
<pre><code class="css">
Masukkan kode css disini
</code></pre>

Untuk Menampilkan HTML
<pre><code class="html">
Masukkan kode html disini
</code></pre>

Untuk Menampilkan Javascript
<pre><code class="javascript">
Masukkan kode javascript disini
</code></pre>

Sampai disini saja tutorial Menggunakan Highlight.js untuk menampilkan Code pada Blogspot, semoga dapat dipahami dengan mudah. Namun jika masih ada kendala atau pertanyaan, silahkan tuliskan pertanyaan mu di kolom komentar di bawah ini ya.. Oh ya perlu di ingat, dalam membuat postingannya harus dalam mode HTML, bukan compose.