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



Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.
Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.

3 comments:

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

    ReplyDelete
  2. 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