Sabtu, 28 September 2013

Cara Membuat Syntax Highlighter

Syntax Highlighter adalah kolom atau teks area yang biasanya diisikan dengan kode - kode tertentu, seperti java script, html, php atau laiinya. Syntax Highlighter juga mempunyai kelebihan yaitu dapat mendukung jQuery hampir sama dengan Blockquote. Tujuan pemasangan Syntax Highlighter di blog mempunyai tampilan yang lebih keren dan rapi dan terkesan sedikit lebih professional. he.

Syntax Highlighter

Dan cara pemasangannya atau membuat Syntax Highlighter ikuti langkah - langkah di bawah ini :

- Pada edit html cari kode </head> dan pastekan kode dibawah ini tepat diatas kode </head> 

<!-- 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 src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushAS3.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- End code hilight -->


- Preview dan jika tidak terjadi error langsung sobat save.

Selanjutnya, tata cara bagaimana kita memasukkan kedalam postingan kita.
caranya :
Untuk memasang kode HTML :
<pre class="brush:html"> Masukan kode HTML disini </pre>

Untuk memasang kode CSS :
<pre class="brush:css">Masukan kode CSS disini </pre>

Untuk memasang kode Javascript :
<pre class="brush:js">Masukan kode Javascript disini </pre>

Untuk memasang kode PHP :
<pre class="brush:php">Masukan kode Php disini </pre>

Untuk memasang kode Python :
<pre class="brush:python">Masukan kode Python disini </pre>


Jika kita menggunakan blogger, pasti kita menggunakan kode html. Jadi yang kita pilih adalah
<pre class="brush:html"> Masukan kode HTML disini </pre>

Setelah selesai membuat postingan kita, biasanya di compose untuk kode Highlighter nya tidak nampak, jadi kita preview dulu.

Semoga bermanfaat dan terima kasih atas kunjungan sobat.

note :
Pada saat membuat posting, kita gunakan HTML bukan di Compose.

Trik Blogger lainnya klik di bawah ini :

2 comments

Terima kasih, postingannya sangat membantu..
tapi punya saya kog hasilnya warna hitam yaa...?!!


EmoticonEmoticon