Cara menambah Syntax Highlighter Pretify untuk Blogspot

Berikut ini cara Menambah Syntax Highlighter Pretify untuk Blogspot, kebetulan host-host penyedia layanan script seperti ini sudah pada migrasi ke Github, jadi bisa dikatakan artikel tentang penambahan kode syntax higlight pretify ini sudah mengalami perubahan url.
Awalnya saya mau memasang add-on syntax highlighter ini yang masih menggunakan host google-code, tetapi setelah baca-baca lagi,ternyata tempat hosting pretify syntax highlighter ini sudah migrasi ke github.
Pretify ini cukup lumayan banyak dalam mendukung jenis penulisan language scripting-nya, diantaranya yaitu :

Apollo; Basic; Clojure; CSS; Dart; Erlang; Go; Haskell; Lisp, Scheme; Llvm; Lua; Matlab; MLs:F#, Ocaml,SML; Mumps; Nemerle; Pascal; Protocol buffers; R, S; RD; Scala; SQL; TCL; Latek; Visual Basic;CHDL; Wiki; XQ; YAML

Baik, kita langsung saja. pertama copas script dibawah ini setelah tag <head> via Dashboard > Template > HTML :
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

Setelah itu, jika anda ingin menambahkan themes background agar tampilannya lebih menarik, anda bisa pilih themes-themes di url dibawah ini, silahkan pilih salah satu yang anda suka, klik nama theme-nya, nanti anda akan dihadapkan pada kode-kode CSS, copast semua kode CSS tsb di menu editing template HTML sebelum tag ]]></b:skin>

Klik link dibawah ini, lalu pilih themes yang anda suka dengan meng-klik nama theme-nya :
Themes galery pretify syntax highlighter
pretify themes
pretify themes
Gambar diatas adalah konten dari url themes galeri, jadi pilih salah satu, dan nanti anda akan diarahkan ke page yang berisi kode CSS, copast dan ikuti sesuai langkah yang saya tulis di atas.
Setelah anda copast kode CSS diatas, berarti proses sudah selesai. dan anda sudah bisa menggunakan add-on tersebut.

Untuk cara penggunaan add-on Pretify ini, anda mesti menuliskan syntax nya seperti dibawah ini pada halaman post yang akan anda buat dan masuk ke tab HTML, bukan pada tab Compose.
contohnya seperti ini:
<pre class="prettyprint">.. isi code-nya..</pre>

untuk pilihan penulisan yang lain, anda bisa menambahkan opsi seperti "lang-css" "lang-html" atau opsi "linenums" untuk menampilkan numbering.

Contohnya seperti ini :
<pre class="prettyprint lang-html linenums">..isi kode html..</pre>
Jika saya contohkan menggunakan penulisan seperti diatas, hasilnya seperti ini, oh ya... disini saya menggunakan theme pretify Son of Obsidian lho yaa..?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function($){
var kampret = $('[src*="u-ad.info"]');
if (kampret){
kampret.remove();
}
$('script:contains("u-ad.info")').remove();    
});
</script>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31455784-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Yup, dan akhirnya proses cara menambah syntax highlighter pretify untuk blogspot telah selesai, kini anda bisa mencoba-nya.

Untuk info lebih lengkap, silahkan akses official site mereka di github.
Source http://koentji.blogspot.com/2015/05/cara-menambah-syntax-highlighter.html

0 comments