Pada artikel kali ini saya akan menulis tentang satu plugin syntax highlighting yang bernama PrismJS oleh Lea Verou. Selain camtik plugin ini sangat ringan.
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 fileprism.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 fileprism.css dan prism.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 bukan Compose. Tulis seperti ini:
<script>
var today= new Date()
</script>
....
<body onload=alert(today)>
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">
<script>
var today= new Date()
</script>
....
<body onload=alert(today)>
</code>
</pre>
OK! Selamat mencoba.
.png)
Masih Bingung Saya?
ReplyDeleteDicoba lagi :)
DeleteWOrk gan... tengkiu :*
ReplyDeletethnkjjj
ReplyDelete