Cara Membuat Syntax Highlighter Dengan PHP

Saya mulanya terinspirasi hilite.me, sebuah situs sederhana yang menawarkan online syntax highlighter. Mulailah saya menelusuri github dan google untuk mempermudah keinginan saya membuat situs serupa.

Daru upaya ini, saya menemukan Highlight.php dari github (link), sebuah script class PHP untuk mempermudah pembuatan online syntax highlighter. Menurut pemegang kendali project ini, highlight.php merupakan pengembangan dari kode proyek highlight.js (link) yang sudah ada sebelumnya.

Dengan memakai bantuan class milik highlight.php, membuat syntax highlighter dengan PHP menjadi sangat mudah. Bahkan saya sudah membuatnya dan menjalankannya sebagai salah satu tools milik Komputoo (http://tools.komputoo.pw).

Berikut ini contoh kode implementasi syntax highlighter yang saya copy dari highlight.php.

<?php
require_once("Highlight/Autoloader.php");
spl_autoload_register("Highlight\\Autoloader::load");

$hl = new Highlight\Highlighter();
$r = $hl->highlight("html", file_get_contents(__FILE__));

?>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/default.css">
    </head>
    <body>
        <pre><code class="hljs <?=$r->language?>"><?=$r->value?></code></pre>
    </body>
</html>

Yang paling pertama, kita harus meng-include source code Autoloader.php dan mendaftarkan autoload; agar bisa menggunakan class milik highlight.php.

require_once("Highlight/Autoloader.php");
spl_autoload_register("Highlight\\Autoloader::load");

Lalu buat objek highlight.php baru.

$hl = new Highlight\Highlighter();

Objek inilah yang bisa kita gunakan untuk melakukan syntax highlighting.

$r = $hl->highlight("<jenis syntax kode>", "<source code yang ingin di-highlight>");

Hasil dari proses highlight tersebut bisa diekstraksi dengan mudah.

$r->language --> jenis syntax yang barusan di-highlight

$r->value --> kode HTML yang sudah siap ditampilkan

Sehingga, jika digabungkan...

<pre><code class="hljs <?=$r->language?>"><?=$r->value?></code></pre>

Selain mudah, highlight.php juga saya akui lengkap fiturnya. Saya bismemilih banyak sekali tema syntax yangsudah disediakan olehnya. Untuk menggunakan tema tersebut, janga lupa include CSS sebelum kode hasil di-plot.

<link rel="stylesheet" type="text/css" href="styles/default.css">

Anda bisa mengubah style default.css dengan style lain yang anda suka. Hasilnya, syntax highlighter online yang berhasil saya buat nampak seperti berikut (link demo).