Cara Memasang Syntax Highlighter pada Web

Hallo sobat. Dalam tulisan kali ini, kita akan mempelajari mengenai syntax highlighter. Apa sih itu? Syntax Higlighter adalah salah satu dari sekian banyak code yang berfungsi untuk menyorot tulisan script Anda agar dapat terlihat lebih cantik dan menarik. Untuk contohnya, bisa dilihat pada blog ini yang kontennya memuat script. Dalam penerapan Syntax Highlighter ini biasanya digunakan pada web application maupun blog dimana biasanaya memuat script untuk ditampilkan.

Ok, kita langsung saja menerapkan penggunaan syntax highlighter ini. Sebelumnya, berikut adalah web resmi Syntax Highlighter http://alexgorbatchev.com/SyntaxHighlighter/ dan untuk file yang dibutuhkan, Anda dapat klik button download di bawah artikel ini. Ok, kita lanjutkan.

Saya anggap Anda sudah mengunduh file yang dibuthkan, sekarang kita akan mencoba bagaimana menerapkannya. Sebagai contoh, kita akan letakkan pada wordpress. Untuk selain itu, bisa Anda sesuaikan karena cara juga relatif sama persis. Letakkan code berikut di antara <header>…</header>.

 
<script src='/highlighter/shCore.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushPlain.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushCSharp.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushBash.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushCpp.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushCss.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushJScript.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushJava.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushPhp.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushPowerShell.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushPython.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushSql.min.js' type='text/javascript'></script>
<script src='/highlighter/shBrushXml.min.js' type='text/javascript'></script>
<link href='/highlighter/shCore.min.css' rel='stylesheet' type='text/css'/>
<link href='/highlighter/shThemeMidnight.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<script language='javascript' type='text/javascript'>
    SyntaxHighlighter.highlight();
</script>
  

Setelah itu, untuk menampilkan script menggunakan Syntax Highlighter, kita letakkan pada konten, contohnya adalah sebagai berikut. Contoh berikut apabila script kita berbentuk HTML.

 
<pre class="brush:html">
<input type="password" name="pass1" id="passwd">
<input type="checkbox" onclick="showPasswd()"> Show Password

</pre>
 

Setelah selesai, simpan dan coba cek menggunakan browser. Jika berhasil, maka takan menampilkan seperti ini :

 

 Show Password
 
 

Mudah bukan? sekarang giliran Anda untuk mencoba. Semoga sukses.