Cara Pasang dan Menggabung Syntax Highlighter dan Highlight.js

Memasang dan menggabung syntax highlighter adalah solusi terbaik optimasi website/ blog dari sisi kecepatan loading sekaligus mempercantik dan merapihkan website beserta resourcenya. Kenapa ini penting? Kita tahu bahwa kecepatan loading blog merupakan unsur yang selalu penting untuk tetap dipertahankan dan ditingkatkan. Kaitannya dengan penambahan fitur Syntax Highlighting atau penyorotan sintak adalah bertambahnya pula jumlah file yang harus disiapkan. Syntax Highlighter memerlukan cukup banyak file meliputi shCore.js, style.css dan sejumlah brush yang diperlukan untuk highlighting bahasa program yang bersangkutan. Hal ini bertentangan dengan prinsip mengurangi jumlah http request yang berimbas pada menurunnya kecepatan loading website dan semakin bertambah besarnya ukuran webpage kita.

Sebagai webmaster tentunya Kita harus memperhatikan dan menghindari isu di atas. Solusinya adalah, kita dapat menggabungkan semua resources dalam paket Syntax Highlighter menjadi satu. Merujuk pada titel artikel kali ini, ada 2 jenis syntax highlighter yang akan saya bahas yaitu Syntax Highlighter dan Highlight.js.

Cara Pasang dan Menggabung Syntax Highlighter

Seperti yang telah saya bahas sebelumnya pada 11 Syntax Highlighter Pilihan, tipe penyorot sintak ini adalah yang terbaik menurut saya. Sebenarnya cara pasang sudahlah mudah, berikut langkahnya (Saya asumsikan Anda sudah mendownload scriptnya):

1. Tambahkan kode berikut pada bagian head dokumen html Anda:

   <link type="text/css" rel="stylesheet" href="http://sitemu.com/shCoreDefault.css"/>
   <script type="text/javascript" src="http://sitemu.com/shCore.js"></script>
   <script type="text/javascript" src="http://sitemu.com/shBrushJScript.js"></script>
   <script type="text/javascript">SyntaxHighlighter.all();</script>

2. Untuk memanggil fungsi syntax highlighting, maka tambahkan kode <pre class=”brush: js;”> sebelum kode yang ingin disoroti, contoh:

   <pre class="brush: js;">
   function helloSyntaxHighlighter()
   {
   	return "hi!";
   }
   </pre>

   Penting: Value atau nilai dari class yang digunakan akan sangat tergantung pada tipe kode yang ingin disoroti. Dalam contoh di atas, jenis kode yang sintaknya disoroti adalah javascript. Maka perhatikan pada bagian head, script yang dipakai adalah shBrushJScript.js maka nilai yang dipakai “brush: js”. Untuk menyoroti tipe kode yang berbeda misalnya PHP maka script pada head dan nilai class haruslah sama pula (“brush: php”). Demikian pula seterusnya…

Dari cara pemakaian bawaan asli Syntax Highlighter di atas, dapat kita cermati bahwa semakin banyak tipe kode yang ingin disoroti maka akan semakin banyak pula javascript yang diperlukan. Cara seperti ini tidaklah efektif dan kurang menyeluruh, dalam artian jika kita load sejumlah script namun tipe kode sintak yang diperlukan hanya sedikit maka itu artinya pemborosan resource untuk sesuatu yang tidak terpakai. Nah, untuk itulah saya tekankan pentingnya menggabungkan script Syntax Highlighter ini. OK deh berikut tahapannya:

1. Pertama, Menggabungkan script Brush. Caranya mudah saja, buatlah satu buah file javascript baru (kosong), misalnya gabungan.js. Sekarang pilih brush yang akan dipakai, saran saya gunakan hanya bahasa program populer saja seperti html. js, css, php, xml dan lain-lain atau bahasa yang Anda kuasai. Copy isi file misalnya shBrushXml.js, paste pada file gabungan.js. Buka dan salin lagi file berikutnya misal shBrushCss.js, paste dan tambahkan pada file gabungan.js, demikian dan seterusnya untuk semua file brush yang diperlukan. Jangan lupa menambahkan semicolon (;) sebagai pemisah antara script brush. Gambarannya seperti ini:

   // BRUSH JS
   (function()
   {
   	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
   	function Brush()
   	{var keywords =	'break case ' dan seterusnya...;
   // BRUSH CSS
   (function()
   {
   	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
   	function Brush()
   	{var = dan seterusnya...;
   // BRUSH XML
   (function()
   {
   	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
   	function Brush()
   	{
   	function process(match, regexInfo) dan seterusnya...;

2. Kedua, Menggabungkan script Brush dengan Syntax Highlighter Core. Caranya sama saja dengan langkah pertama di atas, namun ini sifatnya optional. Sebab dalam beberapa kasus (versi terdahulu) script brush dan core yang digabungkan membuat fungsinya tidak berjalan dengan baik. Tapi pada versi terakhir (syntaxhighlighter 3.0.83) saya sudah mencobanya dan dapat berfungsi dengan baik. Teruskan langkah pertama, namun kali ini tambahkan script shCore.js pada bagian atas. Berikut gambarannya:

   // Syntax Highlighter Core
   eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String))...
   // BRUSH CSS
   (function()
   {
   	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;
   	function Brush()
   	{
   		function getKeywordsCSS(str) dan seterusnya...;

3. Ketiga, Menambahkan CSS pada CSS template. Caranya juga sederhana, cukup salin CSS syntax highlight yang Anda pilih dan tambahkan pada CSS tempate sesuai tema yang Anda gunakan. Atau untuk lebih mengoptimalkan kinerja blog, Anda dapat menggabungkan beberapa CSS sekaligus mengkompressnya agar ukurannya menjadi lebih kecil. Silahkan baca caranya pada Cara Kompres/ Memperkecil Ukuran Javascript dan CSS.

Jika langkah-langkah di atas sudah selesai, sekarang tinggal menyesuaikannya dengan script baru yang sudah digabungkan, ubah kode pada head menjadi seperti ini:

<script type="text/javascript" src="http://sitemu.com/gabungan.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

Pada tulisan berikutnya Insya Allah akan saya terangkan pula bagaimana “overriding” atau mengambil alih parameter default syntax highlighter melalui javascript. Dengan cara ini memungkinkan untuk menghilangkan toolbar berupa “?”, enable atau disable penomoran (gutter), mulai urutan penomoran dari angka tertentu, penyorotan khusus baris tertentu dan lain-lain. Silahkan temukan caranya pada Trik Lengkap Merubah Default Options Syntax Highlighter.

Cara Pasang Highlight.js

Highlight.js lebih mudah digunakan karena kita paket highlight bahasa pemrogramannya sudah digabungkan dan pemakaiannya lebih bersifat universal untuk semua tipe sintak. Berikut detail lengkap cara menggunakannya:

1. Kunjungi halaman ini untuk memilih dan download paket script highlightnya. Pilih bahasa yang ingin dipakai dan klik download.
2. Upload dan simpan paket Highlight.js yang sudah diekstrak ke server hostingmu. Untuk menambahkan CSS, gabungkan saja file CSS yang dipilih dalam paket Highlight.js ke CSS template seperti cara di atas.
3. Tambahkan kode berikut untuk memanggil fungsi hilite pada bagian head:

   <script type="text/javascript" src="http://sitemu.com/highlight.pack.js"></script>
   <script type="text/javascript">hljs.initHighlightingOnLoad();</script>

   Adapun untuk menggunakannya dalam posting, cukup gunakan kode <pre><code> sebelum kode yang ingin disoroti. <pre><code> ini berlaku universal untuk setiap jenis bahasa, sehingga tidak perlu memanggil class tersendiri seperti SyntaxHighlighter, style-nya akan diterapkan secara otomatis sesuai bahasa yang dikenali script. Berikut ilustrasi pemakaiannya:

   /* HIGHLIGHT.JS PADA CSS */
   <pre><code>
   a {color:#2970A6;text-decoration:none;
   a:hover {color:#FF5F00;text-decoration:none;
   </code></pre>
   
   // HIGHLIGHT.JS PADA JavaScript
   <pre><code>
   function setStyleDisplay(id,status){$(id)
   var settings = {};
       if ($code.hasClass("boc-nogutter"))
       settings.noGutter = true;...
   </code></pre>

Demikian Cara Pasang dan Menggabung Syntax Highlighter dan Highlight.js, jika kurang jelas atau ada yang ingin ditanyakan silahkan tuliskan lewat komentar di bawah. Selamat mencoba!