Cara membuat Syntax menggunakan Javascript Highlight Sebagai pembungkus kode HTML


July 08, 2017

Jika kalian mecari cara agar membuat pembungkus kode pada artike lebih keren, Saya share caranya, cara memasang highligt.js dengan benar.

Mengenai hightlight ini memang benar benar sangat berguna untuk melakukan styling pada bagian kode <pre><code> dan diakhiri dengan </pre></code>, jika kalian menuliskan kode ini :

<pre>
 <code>
&lt;style&gt;
body {
   height: 100%;
   width: 100%;
}
&lt;/style&gt;
 </code>
</pre>

Maka yang terlihat hanyalah code biasa tanpa style

image biasa tanpa style

tetapi jika kita menggunakan script highlight, maka yang terlihat sungguh sangat mencengangan.... (kok jadi alay gini).

<style>
body {
 height: 100%;
    width: 100%;
    }
</style>

Menarik kan, jika ingin menggunakannya cukup ikuti langkah langkah berikut ini.

#1 Pertama

Kunjungi pergi ke situs official highlightjs.org, untuk tutorial kali ini Saya masih menggunakan versi ke 9.12.0 , dan bisa saja berubah setiap kali update, klik Get version 9.12.0

#2 Kedua

Copy kode yang berada di bawah "cdnjs", atau saya sudah menyiapkan kodenya untuk versi 9.12.0

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

#3 Ketiga

Letakkan kode tersebut pada kode sebelum </head> pada template blog kalian.

#4 Keempat

Save template kalian, karena tidak akan berhasil jika kalian tidak menyimpan apa yang telah kalian rubah

#5 Cara kerja

Untuk melihat cara kerja highlight.js cukup mudah, dengan cara menuliskan tag <pre><code>, kemudian isi sesuai kebutuhan kalian dan diakhir dengan tag </code></pre>, Mudah kan

#6 Tambahan

Jika kalian mau mengganti versi style kalian bisa kunjungi Github highlight.js, kemudian masuk ke folder src > styles kalian bisa pilih style yang ingin kalian pakai, untuk melihat priview semua style bisa kembali ke highlightjs.org, dan klik saja "style" untuk ke style selanjutnya, jika sudah memilih stylenya, misal Saya ingin menggant ke style "railscasts", maka Saya cukup ganti "default.min.css" menjadi "railscasts.min.css"
Note: Jangan lupa menambah ".min" sebelum".css"

3 comments:

  1. Wkwk masih suka bingung ngetik keyword di google biar nemuin syntax keren kaya gini. Nyari pake keyword 'pre code' gada yg kaya gini.

    ReplyDelete