Apa itu Syntax Highlighter? SyntaxHighlighting adalah upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang l...
Script SyntaxHighlighter ada beberapa jenis, yang terbaru sebenarnya lebih canggih lagi. Sebagai permulaan saya akan berbagi versi standard-nya. Kelebihan versi ini adalah memiliki beberapa opsi saat hover alias mouse diarahkan di atas script (muncul di pojok kanan atas) yaitu: View Source (dalam blank page, pop out), Copy to Clipboard, dan Print. Ketiganya sangat memudahkan dalam meng-copy, melihat kode dalam bentuk dan susunan aslinya, serta cetak kode. Masing-masing kode diterjemahkan oleh script yang disebut Brush. Di beberapa platform seperti WordPress, Drupal, dan Joomla, kita bisa menggunakan berbagai jenis modul atau plugin SyntaxHighlighter siap pakai, tetapi di Blogger, kita harus menambahkannya secara manual. Berikut langkah demi langkah menambahkan SyntaxHighlihgter.
Menambahkan Script dan Brush ke dalam Template
- Buka dashboard > Template > Edit HTML
-
Kemudian copy-paste URL berikut dan letakkan dalam tag
<head>atau tepat di tag</head>. - Save template.
<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>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
Cara Menggunakan SyntaxHighlighther di dalam Post/Artikel Blog
Setiap jenis kode yang ingin ditampilkan di dalam halaman sebuah web biasanya menggunakan tag <pre>, meskipun dalam beberapa hal juga bisa menggunakan tag <code>. Untuk post blogger, kita akan menggunakan tag yang pertama. Kemudian masing-masing brush yang dibutuhkan dipanggil menggunakan atribut class. Contoh penulisannya:<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python"> Kode Di Sini </pre>
Pada contoh di atas, kita lihat nantinya jenis-jenis kode yang akan di highlight adalah gabungan antara CSS, JS, PHP, SQL, dan Phyton. Jika anda hanya membutuhkan beberapa jenis saja, sekiranya yang diperlukan, maka gunakan brush sesuai jenis script saja. Misalnya, jika saya hanya butuh highlight HTML, JS, dan CSS, maka penulisannya adalah:
<pre class="brush:css, brush:html, brush:js"> Kode Di Sini </pre>
Menggunakan yang diperlukan saja akan menghemat waktu load dan menghindari load script yang tidak perlu. Jadi jika anda biasanya hanya berbagi kode campuran yang terdiri dari 3 script umum di atas, gunakan susunan seperti contoh terakhir itu. Berikut langkah-langkah menambahkan Syntax Highlighter ke dalam artikel:
- Ketika akan memasukkan kode, pindah dari mode "Compose" ke mode "HTML"
- Kemudian masukkan tag <pre> dan class sesuai yang diinginkan, atau anda bisa copy contoh saya di atas.
- Sebelum memasukkan kode di antara tag <pre>, anda harus parse dulu kode tersebut. Ini Penting. Karena jika tidak di parse, maka kode yang dimasukkan ke dalam editor HTML akan diterjemahkan sebagai perintah, bukan teks biasa. Gunakan HTML/Script Parser, parse kode ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag <pre>. Contoh yang benar:
- Anda bisa kembali ke mode "compose" jika ingin melanjutkan menulis.
- Selesai.
<pre class="brush:css, brush:html, brush:js"> <script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
</pre><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App-ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Catatan: Script akan diload paling akhir oleh browser, jadi akan muncul belakangan setelah semua script dan elemen diload terlebih dahulu. Jadi syntaxt highlighter akan muncul paling akhir.
Itu dia bagaimana cara menggunakan Syntax Highlighter dengan benar di Blogger.
.png)
COMMENTS