Cara membuat Syntax Highlighter untuk Kode di blogspot V2

Cara membuat Syntax Highlighter untuk Kode di blogspot V2

Cara membuat Syntax Highlighter untuk Kode di blogspot - tutorial ini,hampir sama dengan membuat blockquote bernomor.atau pre bernomor,yang biasanya sudah sangat umum digunakan oleh para blogger.nah,Seperti judulnya, kali ini saya ingin mengajak anda untuk membuat Syntax Highlighter, Apa Itu Syntax Highlighter? Syntax Highlighter bisa dibilang punya fungsi yang hampir sama dengan "Blockquote" namun bedanya Syntax Highlighter lebih dikhususkan untuk syntax HTML, CSS ataupun Javascript. Bentuk dari Syntax Highlighter pun dibuat menyerupai page Code di Aplikasi seperti Jcreator atau lainnya yang pastinya sudah sangat Familiar untuk anda yang berkecimpung di dunia Programming :D

Tutorial :

• masuk akun blogger
• ke rancangan >> edit html >> centang "expand template widget"
• cari kode </head>
• letakkan kode berikut diatasnya

<!-- syntax highlighting for ea-xp.blogspot.com -->
<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 -->




save template 



Contoh :



Penggunaan untuk kode css

    


Penggunaan untuk kode HTML

    


Penggunaan untuk kode Javascript

    




Dan berikut cara penggunaanya di postingan:



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>



:D semoga bermanfaat


Source : http://ea-xp.blogspot.com/2012/09/cara-membuat-syntax-highlighter-untuk.html 



Cara membuat Syntax Highlighter untuk Kode di blogspot V2