Tak jarang orang terpaksa menggunakan blockquote untuk menangani hal ini, ya tentu saja untuk berbagi script code dengan pengunjung mereka. Kini Anda tidak perlu khawatir dan bisa meninggalkan cara ndeso tersebut, sebab Alex Gorbatchev telah menciptakan fungsi Highlighter yang luarbiasa, rapi dan dapat diterapkan untuk menyorot bahasa pemrograman umum sperti HTML, CSS, JavaScript, Php, Python, SQL, XML, C++, dll.Kode ditampilkan baris demi baris beserta nomornya. Hal ini juga menyediakan pengguna dengan opsi untuk print code, selain copy ke clipboard.
Alex telah merilis versi terbaru (3.0.83) tetapi kami akan menggunakan versi lama (2.1.383) karena mengandung opsi yang saya sebutkan di atas. Setiap jenis kode dilengkapi dengan skrip bernama Brush. Saya telah menggunakan Brush yang paling populer seperti yang saya sebutkan sebelumnya tetapi jika Anda ingin menggunakan Brush pilihan Anda maka Anda dapat memilih salah satu dari daftar Brush INI.
LIHAT DEMO
1. Setup ke Blogger / Blogspot
Langkah demi langkah secara sederhana yang dapat Anda bayangkan & terapkan.
- Pergi ke Blogger -> Desain -> Edit HTML
- Cadangkan / Backup template Anda
- Cari ini ]]></b:skin> menggunakan CTRL+F keyboard Anda.
- Letakkan tepat di bawahnya kode berikut ini,
<!--SYNTAX HIGHLIGHTER BY MBT STARTS-->
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER BY MBT ENDS-->
- Simpan template, beres!
2. Bagaimana Cara Kerjanya?
Kapanpun Anda ingin berbagi kode jenis apa pun dengan pembaca Anda, cukup lampirkan kode tersebut diantara tag PRE berikut,
<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
LETAKAN KODE ANDA DI SINI
</pre>
Saya telah menggabungkan semua kuas menjadi satu sehingga memudahkan newbie untuk mengimplementasikan tutorial.
Catatan:
- Jangan tambahkan kode secara langsung, karena Anda akan mendapatkan kesalahan di Blogger Editor, sebagai gantinya, parse kode pertama menggunakan Parser Tool yang disediakan oleh kami!
- Aktifkan mode HTML pada text editor blogger untuk menerapkan tag pre & menambahkan kode tersebut!
Ganti LETAKAN KODE ANDA DI SINI dengan kode yang di-parsing / dikodekan, langsung paste dan mempublikasikan posting Anda untuk melihat keajaiban.
Itu dia! Semoga Anda menyukainya. Saya akan menerbitkan skema warna yang berbeda untuk Penyorot Sintaks dalam posting saya berikutnya jadi pastikan Anda tidak ketinggalan pembaruan.
