Memasang Syntax Highlighting prism.js di Blogger atau Website

Kode yang berwarna-warni adalah contoh syntax higlighting yaitu penandaan sintaks agar berbeda dari teks umum lainnya dalam sebuah halaman blog/web. Misalnya menandai CSS, JavaScript, dll. Pada artikel kali ini saya akan menulis tentang satu plugin syntax highlighting yang bernama PrismJS oleh Lea Verou. Selain camtik plugin ini sangat ringan, jadi Anda tidak perlu khawatir dengan loading halaman web setelah memassang PrismJS.

Tentu Anda sudah familiar dengan syntax highlighter bukan? Ini salah satu contoh potongan JavaScript yang ditandai (higlighted) menggunakan syntax highlighter:

<script language="javascript">
  var today= new Date()
</script>
      ....
<body onload=alert(today)>

Selain ringan, PrismJS bekerja pada hampir semua platform. Apakah situs Anda memiliki host sendiri atau platform CMS populer lainnya seperti WordPress, Blogger atau Tumblr.

Memasang (install) PrismJS di Web

Untuk measang Prism di halaman web Anda membutuhkan file prism.js dan prism.css. Silahkan download di laman resmi, pilih tema dan plugin yang sesuai dengan kebutuhan blog Anda.

File JavaScript prism.js adalah setting-annya dan file CSS prism.css adalah temanya. Setelah kedua file tersebut terunduh silahkan unggah ke situs hosting Anda.

Lalu, buat link ke file prism.css dan prism.js. Contoh:

<!DOCTYPE html>
<html>
<head>
 ...
    <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
 ...
    <!-- bagian paling akhir konten web Anda -->
    <script src="prism.js"></script>
</body>
</html>

Ingat, agar plugin ini bekerja, letakkan file prism.css sebelum tag </head> dan prism.js sebelum tag </body>.

Memasang Prism di Blogger/Tumblr

Cara memasang Prism di Blogger/Tumblr sama dengan di web. Di Blogger kita dapat memasang file prism.css danprism.js ke dalam template menggunakan hosting lain sebagai alternatif seperti Google Drive atau Dropbox. Setelah itu letakkan link file prism.css sebelum tag </head> dan link file prism.js sebelum tag </body>.

Jika Anda meng-hosting file ke Google Drive maka direct link-nya akan seperti ini:http://googledrive.com/host/YOUR_FILE_ID/.

Jika Anda tidak mau atau belum tahu cara meng-hosting kedua file tersebut maka Anda dapat menggunakan link langsung dari Prism:

<link href="http://prismjs.com/themes/prism.css" rel="stylesheet" />

<script src="http://prismjs.com/prism.js"></script>

Cara Menggunakan Prism

Di blogger mungkin Anda harus escape karakter HTML < menjadi < dan > menjadi > untuk membuat baris kode dengan Prism agar bisa tampil seperti ini:

<script language="javascript">
  var today= new Date()
</script>
      ....
<body onload=alert(today)>

Agar bisa tampil seperti di atas maka Anda harus menulis di halaman editor posting blog dalam mode HTML bukanCompose. Tulis seperti ini:

&lt;script&gt;
        var today= new Date()
  &lt;/script&gt;
          ....
&ltbody onload=alert(today)&gt;

Agar highlight bekerja maka snippet (potongan) kode harus dibungkus (wrap) oleh tag <pre> dan <code>. Contoh:

<pre><code class="language-markup">
...di sini snippet kode...
</code>
</pre>

Ganti kata "markup" dengan jenis syntax. Misalnya dalam contoh ini saya ingin meng-higlight JavaScript, maka penulisannya:


<pre><code class="language-javascript">
&lt;script&gt;
        var today= new Date()
  &lt;/script&gt;
          ....
&ltbody onload=alert(today)&gt;
</code>
</pre>

OK! Selamat mencoba.

Author Name

{picture#https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6jBcOMlHfM5ckfOgfHgF8S3bcBlF1LLqvB5pLRwZFNY60xj94s7LKuyBAjIj9ETnBiRbAAM0lUTJq6WH6R2VGBblJW6g3YdZ1YKPwXudeTCgq8x6WXC0ojTIaR3FzDET1F-66YeCgdRU/s1600/Turiswan.png} " Jangan berharap sesuatu yang besar dengan tiba-tiba, mulailah dari yang terkecil dan gapailah semua harapan dengan sungguh-sungguh disertai kerjakeras dan do'a. " {facebook#http://www.facebook.com/turiswan22gtr} {twitter#http://twitter.com/turiswan2298} {google#https://plus.google.com/u/0/106442727760269580008/posts} {pinterest#http://www.pinterest.com/turiswan} {youtube#http://www.youtube.com/channel/UCJL-dLtQyZ_uQx7B3-vThjA?sub_confirmation=1} {instagram#http://instagram.com/turiswan2298}