Assalamualaikum ,Sebenarnya agak sulit menentukan judul artikel ini, sebelumnya mau ngasih judul kaya gini "Cara Membuat Syntax Highlighter Pengganti Blockquote Untuk Blogger", tapi kok agak aneh yaa,,, hhee ya sudahlah akhirnya saya pakai judul yang diatas saja.
Oke , Apa itu Syntax Highlighter, dan apa Fungsinya ??
Syntax Highlight adalah salah satu fitur pada teks editor yang menampilkan atau menyoroti teks, terutama source code yang ditampilkan dalam berbagai warna dan font sesuai dengan kategori masing-masing.
Untuk Blogger sendiri sudah ada fitur seperti Syntax Highlighter ini, yaitu Blockquote. Namun tampilan dari Blockquote masih standar atau biasa saja.
"{timbul pertanyaan dalam pikiran saya...} Kalau sudah ada fitur Blockquote dari Blogger, buat apa kita menggunakan Syntax Highlighter ?..." Nah itu dia, Syntax Highlighter sebenarnya tidak jauh berbeda dengan Blockquote, hanya saja Syntax Highlighter ini tampilannya lebih Elegant dan Professional.
Fungsi Syntax Highlighter :
Dengan menggunakan SyntaxHighlighter ini, maka akan memudahkan pekerjaan kita dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).
Implementasi atau penggunaan nyata dari syntax higlighter pada halaman Website, Blog atau Forum Online sering digunakan sebagai kode prensentasi pada contoh source code seperti : Javascript,HTML,XML,CSS,Python,PHP,JSON,CoffeeScript,Java,SQL,Apache,Haskell,Erlang,Ruby,C++,Objective C, Dan lain sebagainya, karena didunia internet ada banyak bahasa coding yang tidak bisa saya sebutkan semua. hehee
Lantas apa perbedaan dari Syntax Highlighter dengan Blockquote ???... Seperti yang saja jelaskan diatas, perbedaannya terletak pada tampilannya.
Berikut ini adalah Preview dari Syntax Highlighter dan Blockquote agar terlihat jelas dimana perbedaanya.
Preview Menggunakan Syntax Highlighter :
Preview Menggunakan Blockquote :
<meta name="viewport" content="width=device-width">
<link rel="profile" href="Google.com" />
<link rel="pingback" href="Google.com/" />
<link rel="icon" type="image/x-icon" href="YOUR favicon" />
<script type="text/javascript">
<!--
if (top.location != self.location) {
top.location = self.location.hrefbr /> }
//-->
</script> <div class="googleplus"><!--Google --><span>Recommend us on Google!</span>
<div class="g-plusone" size="medium"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></div>
Nah bagaimana, cukup menarik bukan. Kalau begitu sekarang saatnya saya bagikan bagaimana caranya memasang Syntax Highlighter untuk mengganti Blockquote di blog kita masing-masing.
Login terlebih dahulu ke Blogger.com
Pilih blog yang akan dimodifikasi , kemudian pilih Templates
Copy code dibawah ini, kemudian letakkan didalam tag <body>
Kemudian simpan Template
Untuk menggunakan fitur Syntax Highlighter, Sobat hanya perlu menambahkan code seperti berikut :
Dan dibawah ini adalah list Tema dari Syntax Highlighter yang bisa Sobat gunakan :
shThemeDefault.css
shThemeDjango.css
shThemeEmacs.css
shThemeFadeToGrey.css
shThemeMidnight.css
shThemeRDark.css
*Note : Tunggu beberapa detik setelah meng-Klik tema yang diinginkan, waktu ini dibutuhkan untuk memanggil tema yang terkait.
Sebelum menggunakan Syntax Highlighter, Kode harus di Parse terlebih dahulu agar bisa tampil didalam postingan sobat. Untuk mem-Parse Kode HTML sobat, Silahkan menuju link berikut
HTML Encoding Decoding Tool Phrase
Nah bagi teman-teman sekalian yang ingin memperdalam penggunaan dari Syntax Highlighter ini, silahkan mengunjungi Developer langsung dari Syntax Highlighter ini di URL berikut :
SyntaxHighlighter
Selesai sudah Cara Membuat Syntax Highlighter atau Blockquote Untuk Blogger. Jika sobat mengalami kesulitan , silahkan berkomentar dibawah, saya akan senang sekali bisa membantu Sahabat semua. Wasalam.