Cara Pasang Syntax Highlighter pada Blog

Syntaxt Highlighter

Syntax Highlighter adalah text editor yang digunakan sebagai tempat penulisan kode pada postingan artikel blog atau website.

Biasanya tampilan ini kita temui di beberapa situs seperti wordpress atau blogger dengan niche tutorial yang di dalamnya memuat kode-kode seperti CSS, HTML, PHP, Javascript (js), dll.

Apakah syntax highlighter bisa dibuat diblog gratisan seperti blogspot? Tentu bisa yah, sekalipun masih belum beli domain TLD, sama seperti blog saya ini, masih blogspot.

Sebelum memasang syntax di blog kamu, kenali dulu alasan kenapa kita perlu menerapkan Syntax Highlighter di blog. Adapun alasan sekaligus kelebihan pemakaian Syntax Highlighter di blog yaitu.

Syntax Highlighter

1. Merapihkan tampilan huruf yang digunakan untuk menulis kode


2. Huruf bisa dibuat berwarna warni


3. Memudahkan pengunjung mengenali dan menemukan antara penjelasan artikel dan source code yang kita tulis dalam postingan blog.


4. Dapat menarik minat pengunjung blog karena tampilan artikel yang rapih.


5. Tidak merepotkan pengunjung untuk melakukan copy paste kode yang sudah dishare.


6. Masih banyak lagi

Memasang Script Syntax Highlighter di Blogger

Jika blog kamu sering membagikan kode atau blog nice tutorial, alangkah lebih baik jika memasang Syntax Highlighter dengan CSS. Untuk mempermudah dalam pemasangan, silahkan ikuti langkah-langkah berikut dibawah.

1. Pertama silahkan buka tema blog kamu.


2. Jika sebelumnya kamu pernah memasang kode CSS .post-body pre dan .post-body pre code silahkan dihapus dulu agar tidak bentrok dengan yang sudah ada.


3. Copy kode berikut yang ada dibawah kemudian sisipkan paste "Sebelum atau di Atas" kode tag </head>.



.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}



4. Jangan lupa kode di atas disisipkan diantara <style>...</style>. Bila yakin sudah selesai melakukan langkah-langkah diatas, Silahkan kamu akhiri dengan klik Save untuk menerapkan di blog kamu, lalu tutup tema blog.

Cara Menggunakan Script Syntax Highlighter di Blogger

1. Silahkan buka dashboard blog kamu, lalu klik Postingan baru untuk menuliskan artikel yang hendak disisipkan source code.


2. Lalu panggil syntax highlighter dalam postingan kamu dengan menggunakan tag <pre> dan <code>, berikut contoh penulisannya.



<pre> <code>
<!-- Isi text atau kode HTML kamu disini --> 
</code> </pre> 



3. Sampai tahap ini pemasangan syntax highlighter pada blog sudah selesai, terakhir silahkan kamu pilih simpan perubahan template

Bagaimana mudahkan? Dengan pemasangan Syntax Highlighter di blog maka postingan kamu yang dipublish akan kelihatan lebih rapih dan menarik. Semoga kamu yang mencari tutorial ini bisa terbantu. Sekian dan terimakasih.