Sabtu, 25 September 2010
Membuat Syntax Highlighter Untuk Blogger
Membuat Syntax Highlighter Untuk Blogger... Syntax Highlighter adalah semacam wadah atau tempat untuk menyimpan kode-kode yang disertai dengan barisan angka. Kalo menurut kang Wikipedia mah artinya ini (saya kutip langsung dari webnya kang Wikipedia):
Syntax highlighting is a feature of some text editors that display text—especially source code—in different colors and fonts according to the category of terms.[1] This feature eases writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it's made only for human readers/editors.
Syntax highlighting is a form of secondary notation, since the highlights are not part of the text meaning, but serve to reinforce it. Some editors also integrate syntax highlighting with other features, such as spell checking or code folding, as aids to editing which are external to the language.
Kalo dalam blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008).
Adapun fitur yang ada dalam Syntax Highlighter ini yaitu:
1. Adanya fasilitas print untuk kode
2. Adanya fasilitas View Plain yaitu membuka barisan kode dalam popup windows
3. Adanya fasilitas Help untuk melihat bantuan.
Syntax highlighting is a feature of some text editors that display text—especially source code—in different colors and fonts according to the category of terms.[1] This feature eases writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it's made only for human readers/editors.
Syntax highlighting is a form of secondary notation, since the highlights are not part of the text meaning, but serve to reinforce it. Some editors also integrate syntax highlighting with other features, such as spell checking or code folding, as aids to editing which are external to the language.
Kalo dalam blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008).
Adapun fitur yang ada dalam Syntax Highlighter ini yaitu:
1. Adanya fasilitas print untuk kode
2. Adanya fasilitas View Plain yaitu membuka barisan kode dalam popup windows
3. Adanya fasilitas Help untuk melihat bantuan.
untuk lebih jelasnya perhatikan gambar berikut, inilah tampilan Syntax Highlighter.
Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :
untuk membuat Syntax Highlighter ini silahkan kalian login dulu ke BLOGGER kalian dan selanjutnya silahkan kalian baca selengkapnya dibawah ini:
1. Pilih Rancangan
2. Pilih EDIT HTML (centang expand template widget)
3. Simpan kode berikut Setelah kode <head> atau sebelum kode </head>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>4. Selanjutnya scroll mouse kalian kebawah dan cari kode ]]></b:skin>
5. Simpan CSS berikut diatas kode ]]></b:skin> (Klik Buka untuk melihat kode CSSnya)
atau silahkan kalian lihat CSS dengan membuka link ini :
http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
6. Sekarang lanjut ke bagian paling bawah dan cari kode </body>
7. Simpan kode berikut diatas kode </body> tadi
<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
8. Simpan template kalian dan mari Istirahat dulu .......
9. Lanjutkan ya... setelah kita selesai proses pada template sekarang waktunya memanggil kode tadi dengan menggunakan kode berikut :
** Untuk script Kode JS gunakan kode berikut
<pre name="code" class="JScript">
SIMPAN SCRIPT YANG AKAN DIPASANG DISINI
</pre>
** Untuk kode CSS gunakan kode berikut :
<pre name="code" class="Css">
SIMPAN CSS YANG AKAN DIPASANG DISINI
</pre>
Alhamdulillah akhirnya selesai juga....
Baca Juga :
** membuat syntax Highlighter(2)
** membuat syntax Highlighter(3)
Catatan :
Lakukan langkah No.9 setiap kalian membuat postingan dan ingin menampilkan kode-kode
Lakukan langkah No.9 setiap kalian membuat postingan dan ingin menampilkan kode-kode
Yang Punya Syntax Highlighter : Alex Gorbatchev | http://alexgorbatchev.com/SyntaxHighlighter/
No comments yet