Cara Memasang Highlight JS di Blogger

Cara Memasang Highlight JS di Blogger

Banba
Cara Memasang Highlight JS di Blogger

Highlight JS merupakan sebuah library yang digunakan untuk memberikan warna secara otomatis ke dalam tag <pre>. Library ini bisa digunakan disemua kode HTML termasuk memasangnya di template Blogger.

Highlight JS ini sangat cocok digunakan untuk Blog yang membahas pemrogramman atau sejenisnya. Bagi kamu yang tertarik untuk memasang highlight js di Blogger. Silahkan ikuti langkah-langkahnya di bawah ini.

Memasang Highlight JS di Blogger

Sebelum kamu memasang hihglight js di Blogger. Pastikan kamu sudah mem-backup template kamu terlebih dahulu. Untuk menghindari error yang tidak diinginkan.

  1. Pada dashboard Blogger, klik Tema.
  2. Klik icon panah ke bawah disamping tombol SESUAIKAN, lalu klik Edit HTML.
  3. Kemudian, cari kode </head> di template kamu.
  4. Jika sudah ketemu, salin kode di bawah ini dan letakkan di atas kode tersebut.
html
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>
  1. Sekarang, tinggal kita percantik tampilannya, silahkan buka link berikut - Highlight JS Theme.
  2. Cari tema yang kamu inginkan, jika sudah ketemu silahkan cari link CDN-nya di link berikut - Highlight JS CDN.
  3. Misalkan kalian ingin menggunakan tema Github Dark Dimmed. Cari tema tersebut, lalu letakkan di atas kode </head> tadi.
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/github-dark-dimmed.min.css"/>
  1. Jika sudah, jangan lupa klik Save atau Simpan.

Apakah Highlight JS bisa memperlambat Blog?

Sesuai dengan pengalaman saya, Highlight JS ini tidak terlalu berat saat di gunakan pada template Blogger saya ini. Setelah saya cek di Google Page Insight pun, kecepatannya masih hijau. Tapi, adakalanya script tersebut juga bisa memperlambat loading Blog kita. Jadi, jawabannya adalah tidak begitu memperlambat loading Blog.

Bagaimana cara menggunakan Highlight JS?

Setelah kamu berhasil memasang highlight JS di Blogger. Untuk cara menggunakannya sangatlah mudah. Kamu hanya perlu membuat sebuah tag berikut:

html
<pre></code>
  Simpan kode JavaScript, HTML atau CSS kamu disini.
</code></pre>

Agar lebih spesifik, kamu juga bisa memberikan jenis code yang kamu masukkan. Maksudnya, jika kode yang kamu masukkan merupakan kode JavaScript. Kamu bisa menambahkan kelas js pada tag <pre>. Contohnya seperti berikut:

html
<pre class='js'><code>
  Masukkan kode JavaScript kamu disini.
</code><pre>

Begitupun untuk kode HTML, CSS atau PHP. Kamu tinggal menggantinya dengan jenis kode yang akan kamu masukkan.

Oh iya, sebelum kamu memasukkan kode HTML atau JavaScript ke dalam tag <pre>. Pastikan kamu mem-parse terlebih dahulu kode tersebut dengan tools Parse. Kamu bisa menggunakan tool milik saya, silahkan klik link berikut - Tool Parse Online. Setelah kamu parse kode tersebut, sekarang kamu bisa menyimpannya di dalam tag <pre> tadi.

Penutupan

Highlight JS juga bisa kita gunakan dengan Vue.js sampai Node.js. Untuk cara menggunakannya, kamu bisa mempelajarinya langsung di situs resmi Highlight JS. Dan untuk tutorial cara memasang Highlight JS di Blogger cukup sampai disini saja. Terimakasih sudah berkunjung dan semoga bermanfaat.

Related articles

Comments