Syntax hiliter

Syntax hiliter

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 :

<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

loading komentar ...