Menggunakan Prism.js pada Jekyll

Secara default Jekyll 3 sudah terdapat Rouge untuk syntax highlighter, dan saat ini saya ingin merubahnya menggunakan Prism. Penggunaannya cukup mudah, ringan, terdapat plugins dan banyak yang menggunakannya, sehingga bisa mempermudah dalam belajar kode atau baris perintah.

Matikan Rouge

Pertama disable terlebih dahulu Rouge, dengan cara berikut ini:

• Buka _config.yml
• Masukan kode ini:

highlighter: none

• dan untuk disable pada GitHub Pages ditambahkan kode ini:

markdown: kramdown
kramdown:
    syntax_highlighter_opts:
        disable : true

Memasang Prism pada template

Kedua pasang Prism dengan mengikuti cara pemasangan dari situsnya Prism.

• Mengunduh file prism.js dan prims.css disini.
• Memindahkan file yang telah diunduh ke direktori Jekyll js dan css
• Panggil prims.css pada head.html

<link rel="stylesheet" href="/css/prism.css">

• Panggil prims.js pada footer.html

<script src="/js/prism.js"></script>

Memasang Prism pada tulisan

Ketiga gunakan Prism.js syntax highlighter pada posting yang ditulis menggunakan kode markdown triple backticks:

```
tulis kode disini
```

Bisa juga menulis bahasa pemrograman yang akan ditulis seperti ini:

```markdown
tulis kode disini
```

Referensi:

• https://mycyberuniverse.com/disable-rouge-syntax-highlighter.html
• https://mycyberuniverse.com/replace-rouge-highlighter-prismjs-jekyll.html