Cara Menyertakan Syntax Highlighter Di Blogger

Syntax Highlighter cukup dipahami oleh banyak sekali platform, misalnya WordPress, Apache, Mozilla, Yahoo, Aptana, dan banyak lainnya. Apa itu Syntax Highlighter? Kita para blogger acap kali membuatkan script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog. Kebanyakan dari kita menggunakan blockquote selaku "wadah" dari script/kode tersebut dan menandai dengan beberapa warna khusus selaku indikator atau petunjuk. Nah, SyntaxHighlighting merupakan upaya untuk mempresentasikan script/kode tersebut dengan cara dan performa yang lebih baik menurut jenis kode, misalnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi. Ide ini tak lain tiba dari si pembuat SyntaxHighlighter, Alex Gorbachev (thanks for the script).

Script SyntaxHighlighter ada beberapa jenis, yang modern bergotong-royong lebih mutakhir lagi. Tetapi aku akan membagi model standard-nya alasannya memiliki beberapa pilihan dikala mouse diarahkan ke atas script (muncul di pojok kanan atas) yaitu: View Source (dalam blank page, pop out), Copy to Clipboard, dan Print. Ketiganya sungguh membuat lebih mudah dalam meng-copy, menyaksikan instruksi dalam bentuk dan susunan aslinya, serta cetak kode. Masing-masing instruksi diterjemahkan oleh script yang disebut Brush.

Di beberapa platform menyerupai WordPress, Drupal, dan Joomla, kita dapat menggunakan banyak sekali jenis modul atau plugin SyntaxHighlighter siap pakai, namun di Blogger, kita mesti menambahkannya secara manual. Berikut step by step-nya:

Menambahkan Script dan Brush ke dalam Template

1. Buka dashboard > template > edit HTML

2. Cari ]]></b:skin> (ctrl + F dan masukkan ke dalam kotak pencarian, enter)

3.Sekaligus selaku demo, berikut merupakan pola syntax highlighting-nya. Arahkan mouse ke atas script, di bab pojok kanan atas akan timbul opsi, View Source, Copy to Clipboard, dan Print. Juga ada isu script dari pembuatnya. Copy script berikut tepat di bawah ]]></b:skin>.

<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 = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;  SyntaxHighlighter.all();  </script>

4. Save template.

Masing-masing script brush di atas berfungsi untuk menerjemahkan dan memberi style (warna) pada banyak sekali jenis script/kode menyerupai HTML, JS, CSS, PHP, Perl, Phyton, Ruby, XML, Java, dan banyak sekali script standard lainnya. Jika anda cuma membutuhkannya untuk highlighting script tertentu yang anda butuhkan, hapus yang tidak diperlukan.

Cara Menggunakan SyntaxHighlighther di dalam Post/Artikel Blog

Setiap jenis instruksi yang ingin ditampilkan di dalam halaman suatu web lazimnya menggunakan tag <pre>, walaupun dalam beberapa hal juga dapat menggunakan tag <code>. Untuk post blogger, kita akan menggunakan tag yang pertama. Kemudian masing-masing brush yang diperlukan diundang menggunakan atribut class. Contoh penulisannya:

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">

Kode Di Sini

</pre>

Pada pola di atas, kita lihat nantinya jenis-jenis instruksi yang hendak di highlight merupakan gabungan antara CSS, JS, PHP, SQL, dan Phyton. Jika anda cuma memerlukan berbagai macam saja, sekiranya yang diperlukan, maka gunakan brush sesuai jenis script saja. Misalnya, jika aku cuma butuh highlight HTML, JS, dan CSS, maka yang diperlukan adalah:

<pre class="brush:css, brush:html, brush:js">
Kode Di Sini
</pre>

Menggunakan yang diperlukan saja akan meminimalisir waktu load dan menyingkir dari load script yang tidak perlu. Makara jika anda lazimnya cuma membuatkan instruksi adonan yang berisikan 3 script biasa di atas, gunakan susunan menyerupai pola terakhir itu.

Berikut tindakan menyertakan Syntax Highlighter ke dalam Post:

1. Ketika akan memasukkan kode, pindah dari mode "Compose" ke mode "HTML"

2. Kemudian masukkan tag <pre> dan class sesuai yang diinginkan, atau anda dapat copy pola aku di atas.

3. Sebelum memasukkan instruksi di antara tag <pre>, anda mesti parse dahulu instruksi tersebut. Ini Penting. Karena jika tidak di parse, maka instruksi yang dimasukkan ke dalam editor HTML akan diterjemahkan selaku perintah, bukan teks biasa. Gunakan HTML/Script Parser, parse instruksi ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag <pre>.

Contoh yang benar:

<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>

Dan berikut hasilnya:

<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>

4. Anda dapat kembali ke mode "compose" jika ingin melanjutkan menulis, sebelum menerbitkan artikel.

5. Done.

catatan: script akan diload paling simpulan oleh browser, jadi akan timbul belakangan sehabis semua script dan bagian diload apalagi dahulu. Makara syntaxt highlighter akan timbul paling akhir.

Itu beliau bagaimana cara menggunakan Syntax Highlighter dengan benar di Blogger. Anda bergotong-royong juga dapat menggunakan sistem yang serupa pada situs web lain, apabila ingin menambahkannya secara manual tentunya. Syntax Highlighter untuk Blogger di atas masih menggunakan bagan warna default, ada beberapa variasi bagan warna lain yang ke depan Insya Allah akan aku share. Juga. That's it for now and have a nice blogging, as always. :)

Blog Design HTML-CSS Tricks Javascript