14 March 2013

Memasang Syntax Highlighter di Blogger

Pernah melihat kode program di blog yang berwarna-warni layaknya melihat kode program di text editor komputer sampeyan ?... itu namanya Syntax Highlighter. Syntax Highlighter untuk menempatkan kode HTML  yang biasa di posting di blog menjadi sama seperti di text editor layaknya memakai Notepad atau Dreamweaver ataupun program text editor lainnya. Jadi akan terasa lebih indah, berwarna-warni, lebih enak dilihat, dan lebih enak dibaca. Cara membuat untuk blogger berikut ini langkahnya :
  1. Backup terlebih dahulu template blogger sampeyan.
  2. Setelah dibackup, masuk ke Dasbor - Design - Edit HTML
  3. Tekan CTR+F dan cari kode </head> 
  4. Pasang code berikut diatasnya;

<!--SYNTAX HIGHLIGHTER BEGINS-->
<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<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/shBrushCpp.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/shBrushCss.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/shBrushJScript.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/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/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 src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.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>
<!--SYNTAX HIGHLIGHTER ENDS-->

Cara penulisan untuk menggunakan dalam tampilan posting sebagai berikut;

<pre class="brush:html">
tulis disini kode 'HTML' sampeyan
</pre>

Contoh hasil penulisan seperti srkinsyot dibawah ini... Demikian mase, dipake sukur gak dipake juga gak apa-apa



Author : Zainoel Arifin Isa'i

Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas/ freelance yang bermarkas di sudut ruang kamar belakang rumah di daerah pelosok desa terpencil lereng gunung Arjuno.... Facebook : -Mbah Djojo-

4 comments:

  1. i have a problem, the print or help shortcut not show. what's wrong?
    http://mypatriotmuslim.blogspot.com/

    ReplyDelete
  2. nice info gan!

    kunjung & comment balik ya di blog Saya darkmetaland.blogspot.com

    ReplyDelete
  3. Wahh gampang banget ya ternyata kalau udah membaca cara memasang syntax highlighter di blog. Terima kasih atas tutorialnya dan ditunggu komenn baliknya :)

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus