Syntax Highlighter

Home » Blogger » Syntax Highlighter

0 Syntax Highlighter

SyntaxHighlighter buatan Alex Ghorbatchev ini sangat cantik dan manis seperti artis yang berpakaian minimalis.SyntaxHighlighter adalah salah satu strategi untuk meningkatkan keterbacaan dan konteks dari teks, terutama untuk kode yang mencakup beberapa halaman. Pembaca dengan mudah dapat mengabaikan bagian besar komentar atau kode, tergantung pada apa yang diinginkan seseorang.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.

Langkah-langkah setting 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 lang 8:


<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;URL/clipboard.swf&#39;;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.config.toolbarItemWidth = 16;
SyntaxHighlighter.config.toolbarItemHeight = 16;
SyntaxHighlighter.all();
</script>

Simpan Teamplate

Cara memasang nya:

<pre class="brush: js;">
......kode yang ditampilkan.....
</pre>

Perhatikan

kode yg bewarna diatas merupakan style css untuk bentuk-bentuk kotak SyntaxHighlighter, jd anda bisa ganti-ganti temanya.

Kode bewarna diatas merupakan style css hiasan warna pada kotak SyntaxHighlighter.