3
May ’07

Syntax hiliterTopik: resep-php | Tags: php, css, syntax, hiliter, kode, dll

Sebagai blog yang membahas perkembangan web tentunya akan berkecimpung dengan script yang terdiri dari banyak baris. Amat tidak menarik tentunya apabila cuman ditampilkan dengan warna hitam, tanpa petunjuk penomoran baris. Alangkah boring dan ribetnya untuk membacanya apalagi untuk memahaminya.

Untuk keperluan ini kita menggunakan tool syntax hiliter. Ada banyak syntak hiliter yang dapat digunakan. Beberapa pilihan yang bisa dicoba antara lain iG.SyntaxHiliter dan dp.SyntaxHiliter. yang digunakan di website ini adalah dp.SyntaxHiliter. Berikut cara menginstall dp.SyntaxHiliter :

• pertama, pergi ke http://www.dreamprojections.com/SyntaxHighlighter dan download aplikasi yang disediakan. (ZIP, 54kb)
• extract file zip tersebut dan paste di root folder website Anda.
• kemudian copy code berikut sebelum tag </HEAD> pada halaman yang ingin Anda hilite codenya.

<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css">

• dan copy juga beberapa baris kode ini di bagian sebelum tag </body>

<script class="javascript" src="Scripts/shCore.js"></script>
<script class="javascript" src="Scripts/shBrushCSharp.js"></script>
<script class="javascript" src="Scripts/shBrushPhp.js"></script>
<script class="javascript" src="Scripts/shBrushJScript.js"></script>
<script class="javascript" src="Scripts/shBrushJava.js"></script>
<script class="javascript" src="Scripts/shBrushVb.js"></script>
<script class="javascript" src="Scripts/shBrushSql.js"></script>
<script class="javascript" src="Scripts/shBrushXml.js"></script>
<script class="javascript" src="Scripts/shBrushDelphi.js"></script>
<script class="javascript" src="Scripts/shBrushPython.js"></script>
<script class="javascript" src="Scripts/shBrushRuby.js"></script>
<script class="javascript" src="Scripts/shBrushCss.js"></script>
<script class="javascript" src="Scripts/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>

• selanjutnya masukkan kode ini diantara tag kode yang ingin Anda hilite.
  a. Untuk PHP
  <textarea name="code" class="php" rows="15" cols="100"> KODE ANDA DI SINI </textarea>
  b. Untuk CSS
  <textarea name="code" class="css" rows="15" cols="100"> KODE ANDA DI SINI </textarea>
  c. Untuk XML
  <textarea name="code" class="xml" rows="15" cols="100"> KODE ANDA DI SINI </textarea>
  d. Untuk Java
  <textarea name="code" class="java" rows="15" cols="100"> KODE ANDA DI SINI </textarea>
  e. Untuk Java script
  <textarea name="code" class="js" rows="15" cols="100"> KODE ANDA DI SINI </textarea>

Berikut contoh-contohnya:

contoh PHP

Contoh CSS

Artikel yang sesuai:

• Cara mudah membuat web bergaya dengan CSS 3 maker,
• Membuat tree menu dengan javascript,
• membuat pencarian sederhana dengan PHP,
• Tips comment yang cepat dan mudah di PHP,
• e-book PHP 6 and MySQL 5 for dynamic web sites,
• dan lain-lain.