SyntaxHighlighter buatan Alex Ghorbatchev ini sangat cantik dan manis seperti artis yang berpakaian minimalis, sexy dan menggairahkan (halah... nembak keyword doang). Pada versi 2.0.320 ini banyak mengalami perbaikan dari pada versi sebelumnya. Saat pertama kali menggunakan SyntaxHighlighter versi (lupa lagi), Blogger TuneUp banyak mengalami kegagalan. Bukannya bagus malah jadi kacau, tag-tag yang seharusnya tidak tampil justru tampil, bahkan tag-tag yang tadinya tidak ada menjadi ada dan ikut tampil.
Pada awalnya SyntaxHighlighter menggunakan tag <textarea> tetapi sekarang menggunakan tag <pre> sebagai kontainer kode. Tag <pre> itu lebih baik karena kode yang ada diantara tag <pre> akan ditampilkan apa adanya tanpa terpengaruh tag lain. Setting parameter pada versi ini lebih banyak dari pada versi sebelumnya sehingga SyntaxHighlighter semakin fleksibel, lengkap, cepat proses loadingnya dan lebih bagus tampilannya. SyntaxHighlighter cocok bagi mereka para blogger hack, programmer, webdesigner, yang ingin menampilkan source code-nya didalam artikel.
Dibawah ini langkah demi langkah integrasi dan konfigurasi SyntaxHighlighter untuk pengguna Blogger.
Integrasi SyntaxHighlighter pada Blogger:
Langkah 1
Dowload css, script dan komponen SyntaxHighlighter lainnya disini.
Langkah 2
Ekstrak file nya.
Langkah 3
Login ke webhosting anda dan upload file-file SyntaxHighlighter tadi. Jangan lupa copy shortcut URL file tersebut.
atau upload di http://sites.google.com/
Langkah 4
Login ke Blogger dengan Account anda, jangan account saya.
Langkah 5
Masuk ke tab "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan kode dibawah ini diatas kode pada Langkah 6, dan ganti URL sesuai dengan shortcut URL file SyntaxHighlighter yang sudah anda upload pada webhosting anda:
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shCore.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shAutoloader.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushAppleScript.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushAS3.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushBash.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushColdFusion.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCpp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCSharp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushCss.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushDelphi.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushDiff.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushErlang.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushGroovy.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJavaFX.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJava.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushJScript.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPerl.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPhp.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPlain.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPowerShell.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushPython.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushRuby.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushSass.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushScala.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushSql.js'/>
<script type='text/javascript' src='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-1/shBrushVb.js'/>
<link type='text/css' rel='stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shCore.css'/>
<link type='text/css' rel='Stylesheet' href='http://sites.google.com/site/mirzalnefralius/syntaxhighlighter-2/shThemeEmacs.css'/>
Langkah 8
Cari kode dibawah ini:
</body>
Langkah 9
Masukan kode dibawah ini diatas kode pada Langkah 8:
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'URL/clipboard.swf';
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();
Langkah 10
Simpan Template, sampai disini proses integrasi SyntaxHighlighter pada blogger sudah selesai.
Comments (0)
Posting Komentar