Membuat Syntax Highlight Keren

Pa kabar sobat, salam senyum untuk semuanya. Ini nih sobat ane mau postingin tentang pemasangan Syntax Highlight, yaitu suatu tag yang digunakan untuk mempermudah dalam memberikan informasi syntax-syntax, seperti Html, Css, xml, PHP, dan syntax program lainya.

Memang agak berbeda sedikit ame yang ada di blog ane, klo di tempat ane backgroundya putih, mungkin sobat bisa melihat langsung pada blog ane. Nah yang ane postingin seperti pada gambar, gimana.....
Ok Biar ga penasaran yuk ikuti step by stepnya......

1. Login ke akun blog sobat
2. Pilih Rancangan, edit html
3. Cari kode </head>
4. Masukan Scrip dibawah ini, diatas kode no.3
   

   
   
   <!-- Add-in CSS for syntax highlighting -->
   <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>
   <!-- Add-in Script for syntax highlighting -->
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'></script>
   
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
   
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'></script>
   
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
   <script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
   <script language='javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
   SyntaxHighlighter.all();
   </script>
   <!-- End code hilight -->
   
   

   
   


5. Sekarang Simpan deh, klik save
   
   Nah itu belum siap, untuk menggunakanya seperti ini :
   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>
   
   

   
   Gimana Mudahkan, Semoga bermanfa'at....
   

Salam senyum, untuk semua....

---

Source: http://dj-note.blogspot.com/2011/02/cara-membuat-syntax-highlighter-ala.html

Judul : Membuat Syntax Highlight Keren
Rating : 4.5
Ditulis Oleh : sy@ms

Jika mengutip harap berikan link yang menuju ke artikel Membuat Syntax Highlight Keren ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya