Arsip Ku: Convert Source Code To Html With GeSHi

Pada tutorial yang lalu kita pernah membahas tentang Copy As Html. Nah pada tutorial kali ini kita akan membahas hal yang serupa tapi tak sama :), yaitu convert to html. Aplikasi yang digunakan adalah php-geshi. GeSHi adalah singkatan dari Generic Syntax Highliter. Dengan menggunakan aplikasi ini kita akan mendapatkan solusi yang cukup handal dan gratis untuk mengkonversi source code C# yang telah kita buat menjadi format html. Tidak hanya untuk C#, GeSHi (versi 1.0.8.11) juga dapat mengkonversi soure code dari puluhan jenis bahasa pemrograman diantaranya ASM, ASP, ADA, Actionscript, Bash, C, C for Mac, C++, C++ (With QT), Cobol, Java, Delphi, Fortran, Oracle, dan masih banyak lagi. Untuk informasi lebih lengkapnya langsung saja menuju ke website nya http://qbnz.com/highlighter/.

Baiklah langsung saja kita mulai langkah-langkah penginstalannya. Di sini saya akan menginstal GeSHi di atas Ubuntu Desktop 13.10. Pastikan anda sudah menginstall apache web server dan php5. Pertama-tama download GeSHi di sini http://sourceforge.net/projects/geshi/files/.

Kemudian ekstrak, akan menghasilkan folder “geshi” :

it@it-H55M-S2:/var/www$ tar -xzvf GeSHi-1.0.8.11.tar.gz

Pindahkan folder geshi ke lokasi “/var/www/” :

it@it-H55M-S2:/var/www$ sudo mv geshi /var/www/

it@it-H55M-S2:/var/www$ ls -l
total 12
drwxr-xr-x 5 it   it   4096 Peb 12 13:47 geshi
-rw-r--r-- 1 root root  177 Peb 12 09:51 index.html

Masuk ke folder “ghesi” :

it@it-H55M-S2:/var/www$ cd geshi
it@it-H55M-S2:/var/www/geshi$ ls -l
total 232
drwxr-xr-x 2 it   it     4096 Peb 12 12:11 contrib
drwxr-xr-x 3 it   it     4096 Peb 12 12:11 docs
drwxr-xr-x 2 it   it    12288 Peb 12 12:11 geshi
-rw-r--r-- 1 it   it   204576 Agu 19  2012 geshi.php

Buat file index.php dan highlight.php :

it@it-H55M-S2:/var/www/geshi$ sudo pico index.php

GNU nano 2.2.6                                                 File: index.php                                                                                                         
 
<html>
<head><title>Source Code To Html</title></head>
 
<style>
p, div, body {font-size: 13px; font-family: Arial; }
.listing {background-color: #FFFCCC; border-width: 1px 1px 1px 1px; border-style: solid; padding: 7px;}
</style>
 
<body>
<?php if($_POST['code']!=""): ?>
<?php include "highlight.php"; ?>
<?php endif; ?>
 
<p><form method="post" action="#">
Choose code language:
 
<select name="lang">
  <?php 
      foreach (glob("geshi/*.php") as $filenamewp) 
      { 
        $filename = basename($filenamewp, ".php"); 
  ?>
  <option value="<?php echo $filename; ?>" <?php if($_POST['lang']=="$filename") echo "selected=1" ?> > <?php echo strtoupper($filename) ?></option>
 
  <?php
      }
  ?>
</select>
 
<input type="checkbox" name="numbers" <?php if($_POST['numbers']!="") echo "checked=1" ?>>Line numbers</input>
<p><textarea cols="100" rows="15" name="code">
<?php if($_POST['code']!="") echo $_POST['code']; ?>
</textarea>
<p><input type="submit" value="Convert to Html">
</form>
 
<hr>
 
</body>
</html>
 
  
 
^G Get Help                   ^O WriteOut                   ^R Read File                  ^Y Prev Page                  ^K Cut Text                   ^C Cur Pos
^X Exit                       ^J Justify                    ^W Where Is                   ^V Next Page                  ^U UnCut Text                 ^T To Spell

it@it-H55M-S2:/var/www/geshi$ sudo pico highlight.php

  GNU nano 2.2.6                                  File: highlight.php                                                                           
 
<p><div class="listing">
<?php
  include_once 'geshi.php';
  $source = $_POST['code'];
  $language = $_POST['lang'];
  $geshi = new GeSHi($source, $language);
  if($_POST['numbers']!="")
    $geshi->enable_line_numbers(GESHI_NORMAL_LINE_NUMBERS, 0);
  $res = $geshi->parse_code();
  echo $res;
?>
</div>
</p>
<p>Html code:
<br><textarea cols="100" rows="7">
<div class="listing"><?php echo $res; ?></div>
</textarea>
 
 
                                                               [ Read 17 lines ]
^G Get Help             ^O WriteOut             ^R Read File            ^Y Prev Page            ^K Cut Text             ^C Cur Pos
^X Exit                 ^J Justify              ^W Where Is             ^V Next Page            ^U UnCut Text           ^T To Spell

Buka browser dan masukkan alamat “localhost/geshi” atau “ipaddress/geshi” :

Klik tombol Convert to Html, hasilnya akan seperti ini :

Ok, tugas kita sudah selesai. Sekarang anda tinggal convert source code yang anda kehendaki menjadi tag-tag html. Ada puluhan jenis bahasa pemrograman yang disupport. Anda bisa memilihnya melalui Drop Down List Choose code languange. Saya sudah menyiapkan folder geshi siap pakai dalam bentuk file .zip. Anda tinggal mengekstrak file tersebut ke lokasi /var/www. Jadi anda tidak perlu repot-repot mengetikkan kode-kode diatas, cukup ekstrak ke folder apache web server, buka browser, masukkan url geshi dan beres. Silahkan download disini.

Arsip Ku

Laman

Rabu, 12 Februari 2014

Convert Source Code To Html With GeSHi

Tidak ada komentar:

Posting Komentar