Seperti yang kita ketahui, menulis posting yang berisi sintaks program memang harus di bedakan dengan teks biasa. Karena sintaks program mempunyai banyak tag atau tanda-tanda yang harus diperhatikan dalam menulis bahasa program, salah satunya dengan menggunakan Syntaxhighlighter seperti yang terihat dibawah ini.
Untuk bisa membuat syntaxhighlighter, anda harus download file di link ini.
Lalu buat file html dengan koding dibawah ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link type="text/css" rel="stylesheet" href="syntaxhl/js/syntaxhighlighter/styles/shCoreDefault.css"/><link type="text/css" rel="stylesheet" href="syntaxhl/js/syntaxhighlighter/styles/shCoreMidnight.css" /><link type="text/css" rel="stylesheet" href="syntaxhl/js/syntaxhighlighter/styles/shThemeMidnight.css" /> <script type="text/javascript" src="syntaxhl/js/syntaxhighlighter/scripts/shCore.js"></script><script type="text/javascript" src="syntaxhl/js/syntaxhighlighter/scripts/shBrushJScript.js"></script><script type="text/javascript" src="syntaxhl/js/syntaxhighlighter/scripts/shBrushPhp.js"></script><script type="text/javascript" src="syntaxhl/js/syntaxhighlighter/scripts/shBrushPlain.js"></script><script type="text/javascript" src="syntaxhl/js/syntaxhighlighter/scripts/shBrushSql.js"></script><script type="text/javascript" src="syntaxhl/js/syntaxhighlighter/scripts/shBrushXml.js"></script><script type="text/javascript"> SyntaxHighlighter.all();</script> </head><div class="konten"> </div></html> |
Parse script yang akan ditampilkan. sebagai contoh script berikut sudah di parse.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <form action="cari_act.php" method="get"> <div class="input-group col-md-5 col-md-offset-7"> <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search"></span></span> <input type="text" class="form-control" placeholder="Search ..." aria-describedby="basic-addon1" name="cari"> </div></form><br/><table class="table table-hover"> <tr> <th class="col-md-1">No</th> <th class="col-md-2">Kelurahan</th> <th class="col-md-3">Dari Jam</th> <th class="col-md-3">Sampai Jam</th> <th class="col-md-1">Notice</th> <th class="col-md-2">Opsi</th> </tr> |
Letakkan kode tersebut di dalam tag div class konten.
1 2 3 4 5 | <div class="konten"> <pre class="brush:js; brush:php; brush:xml; "> //Letakkan disini kode yang sudah di parse </pre></div> |
Maka akan menjadi sebagai berikut.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <pre class="brush:js; brush:php; brush:xml;"><form action="cari_act.php" method="get"> <div class="input-group col-md-5 col-md-offset-7"> <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search"></span></span> <input type="text" class="form-control" placeholder="Search ..." aria-describedby="basic-addon1" name="cari"> </div></form><br/><table class="table table-hover"> <tr> <th class="col-md-1">No</th> <th class="col-md-2">Kelurahan</th> <th class="col-md-3">Dari Jam</th> <th class="col-md-3">Sampai Jam</th> <th class="col-md-1">Notice</th> <th class="col-md-2">Opsi</th> </tr></pre> |
Setelah selesai, lihat hasilnya, pastikan semuanya tidak ada error.
No comments:
Post a Comment