Home » , » Tips membuat Syntax Highlighter Alexgorbatchev di dalam Postingan Blogger

Tips membuat Syntax Highlighter Alexgorbatchev di dalam Postingan Blogger

Posted by Indo Galau on Selasa, 17 April 2012

Maaf kawand baru sempat nulis Artikel lagi nich, hal ini di sebabkan karena beberapa minggu ini saya sangat di sibukkan dengan belajar otodidak CSS, JavaScript dan JQuery dari berbagai macam situs atau blog yang saya search dari mbah Google, maklumlah masih (newbie.com) nich kawand.. hehe.. :)

Jujur saya katakan kawand, saya sangat kagum sekali terhadap kemajuan tekhnologi dalam negi tercinta ini, karena di dalam negri sendiri ternyata banyak sekali para master yang saya akui 8 jempol kreatifitasnya karena kreatifitas mereka tidak kalah saing dengan para kreator dari luarnegri.

Ok langsung saya yah kawand kita masuk kedalam pembahasan, nah di sini saya akan memberikan tips bagaimana cara membuat Syntax Highlighter Alexgorbatchev kedalam postingan Blogger.

Hal pertama yang harus di lakukan adalah sisipkan code di bawah ini di atas code </head>.
<!-- Syntax Highlighter. fungsi pemakaian: <pre class="brush:css"></pre> | <pre class="brush:js"></pre> |  etc   -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/> 
<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/shBrushCpp.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/shBrushCSharp.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/shBrushJScript.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/shBrushPhp.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/shBrushVb.js' type='text/javascript'/> 
SyntaxHighlighter.all();
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.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;;
</script>
Perlu untuk di garis bawahi, di sini saya menggunakan versi lama.
Untuk mendapatkan versi yang terbaru, anda bisa temukan di website Alexgorbatchev langsung di alexgorbatchev.com.

Jika anda sudah menyisipkan code tersebut di blog anda maka untuk menggunakannya anda hanya perlu memanggil variabelnya classnya saja pada tiap postingan anda di mana anda ingin menyisipkan code HTML, PHP, CSS, JavaScrips, etc yang terdapat di postingan anda.

Cara untuk memanggil variabel Classnya yaitu dengan cara sbb:
<pre class="brush:css">
Kode CSS anda...
</pre> atau
.................
Kode CSS anda...
<pre class="brush:js">
</pre>

.......................
.......................
Biasanya dalam hal untuk menyisipkan code HTML kedalam postingan blog, kita membutuhkan sebuah tool untuk dapat memparse code HTML tersebut sehingga code HTML dapat terlihat di dalam postingan kita.

Untuk dapat memparse code HTML, anda bisa memparsenya langsung di website parse HTML seperti Blogcrowds di blogcrowds.com

Sekian informasi yang saya dapat berikan, mudah-mudahan dapat bermanfaat untuk anda dan tentunya dapat bermanfaat dalam hal membangun informasi tekhnologi dalam negri.
Sampai jumpa lagi di artikel selanjutnya.. ;)


3 komentar:

.comment-content a {display: none;}