11.13.2012

Menggunakan Syntax Highlighter Di Blogger

Tuts ini saya simpan disini selain untuk mengingatkan diri sendiri selain ingin re-post apa yang sudah banyak diposting oleh blogger lainnya. Banyak model Syntax Highlighter yang dipakai oleh para programmer untuk mencatat kode mereka agar lebih mudah dibaca dan dipahami. Salah satunya adalah SyntaxHighlighter versi 3.0.83 ini. Tapi sebelumnya sobat pasti sudah tahu kan apa itu Syntax Highlighter..?
Berikut penampakan gambarnya :
SyntaxHighlighter versi 3.0.83
SyntaxHighlighter versi 3.0.83
Sering lihat kan sob..?? Sobat bisa menulis mengenai pemrograman atau yang mengandung script-script, seperti HTML, CSS, Delphi, PHP, JavaScript, Ruby, SQL, dll.
Baiklah, berikut caranya...
  1. Login ke akun blogger sobat.
  2. Masuk tab Template - Edit - Proceed kemudian centang Expand Widget Templates.
  3. Sebelum itu jika dirasa perlu, backup dahulu template sobat, untuk persiapan jika nanti terjadi kesalahan dalam pengeditan.
  4. Cari kode </head> untuk mempermudah pencarian gunakan Ctrl+F pada keyboard.
  5. Lalu masukkan code JavaScript ini diatas Tag </head> :
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"/> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"/> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/XRegExp.js" type="text/javascript"/> <script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
    
    
  6. Simpan template dan rasakan khasiatnya... :)

Cara Penggunaan Syntax Highlighter dalam postingan:

Penggunaan Syntax Highlighter ini dalam postingan ada dua cara, pastikan sobat harus berada dalam mode HTML, bukan Compose ketika menulis kode ini:
  • Cara 1: dengan menggunanakan Tag <script>....</script> , berikut contohnya penggunaannya:
<script class="brush: html" type="syntaxhighlighter"> Script yg mau di tampilkan </script>
  • Cara 2: dengan menggunakan Tag <pre>....</pre> , Penulis lebih suka menggunakan cara yg kedua, lebih simple... :D, berikut contoh penggunaannya: 
<pre class="brush: html">Script yg mau di tampilkan</pre>

  • Untuk Kode CSS:
<pre class="brush: css">
Letakkan Kode CSS Disini
</pre>
  • Untuk Kode HTML:
<pre class="brush: html">
Letakkan Kode HTML Disini
</pre>
  • Untuk Kode Javascript:
<pre class="brush: Java">
Letakkan Kode Javascript Disini
</pre>

Penjelasan : 
Syntax yang ingin sobat tampilkan harus diletakkan di antara tag <script class="brush: html" type="syntaxhighlighter"> dan </script> atau <pre class="brush: html"> dan </pre>.
Pada class="brush: html" , tulisan yang berwarna merah merupakan brush alias atau type syntax yang ingin digunakan. 

Jika sobat ingin menulis syntax dalam bentuk PHP atau JavaScript atau yang lain, sobat hanya tinggal merubah tulisan yang berwarna merah tersebut ( "brush: ..?.." ) dengan php (untuk type syntax php) atau js (untuk type syntax javascript) atau yang lainnya.
Berikut daftar syntax yang disediakan oleh SyntaxHighlighter:

Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js
  • Brush Name adalah jenis syntax yang ingin digunakan 
  • Brush Aliases adalah class yang harus digunakan 
  • File Name adalah file .js yang diperlukan 
Sementara itu saja. Semoga berjalan mulus... hehehe
Disarikan dari berbagai sumber diantaranya ini dan itu.

Anda juga membaca ...:

7 comments

  1. Replies
    1. maaf mau tnya bro, kl cara memberi info yang dibawah postingan itu bagaimana caranya? yang berkotak ntu.. thnx

      Delete
    2. Euumh.. kotak itu yaah..
      itu biasanya ada yang menggunakan permalink, info dan macam2..
      baiklah.. pada posting berikutnya..
      atau ada master yang lewat disini boleh juga dishare linknya.. :)

      Delete
    3. ok dech ditunggu artikelnya... :D

      Delete