Cara Menambahkan Syntax Highlighter di Blogger

Cara Menambahkan Syntax Highlighter di Blogger - Pada postingan kali ini hostze akan membahas bagaimana Menambahkan Syntax Highlighter di Blog anda ? seringkali berbagi script/kode Kebanyakan dari kita menggunakan blockquote sebagai "wadah" dari script/kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. Nah, SyntaxHighlighting adalah upaya untuk mempresentasikan script/kode tersebut dengan cara tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi. Alex Gorbachev lah pembuat SyntaxHighlighter.

Langkah - Langkah Cara Menambahkan Syntax Highlighter di Blogger :

1. Login Ke Blogger anda.

2. Masuk ke Dasbor -> Template -> Edit HTML.

3. Cari ]]></b:skin> [ Ctrl + F dan masukkan ke dalam kotak pencarian, enter ]

Kode JavaScript

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

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>

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 yang dibutuhkan adalah:

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

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 :

<pre class="brush:css, brush:html, brush:js"> &lt;ul id="recent-posts"&gt;&lt;/ul&gt; &lt;script&gt; //&lt;![CDATA[ var homePage = "http://www.hostze.net/", numPosts = 5; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i&lt;numPosts;i++){for(var j=0;j&lt;numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='&lt;li class="recent-posts"&gt;&lt;strong&gt;&lt;a href="'+link+'" title="'+title+'" target="_blank"&gt;'+title+'&lt;/a&gt;&lt;/strong&gt;&lt;/li&gt;'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&amp;orderby=published&amp;max-results='+numPosts+'&amp;callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]&gt; &lt;/script&gt;</pre>

Catatan : Menggunakan yang diperlukan saja akan menghemat waktu load dan menghindari load script yang tidak perlu. jika anda biasanya hanya berbagi kode campuran yang terdiri dari 3 script umum di atas, gunakan susunan seperti contoh terakhir itu, 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.

Demikianlah artikel yang berjudul tentang Cara Menambahkan Syntax Highlighter di Blogger semoga bermanfaat.