Syntax Highlighter yakni text editor yang digunakan selaku kawasan penulisan aba-aba pada postingan postingan blog / website. Biasanya penampilan ini kita jumpai dibeberapa situs seumpama wordpress atau blogger dengan niche bimbingan yang didalamnya menampung kode-kode seumpama CSS, HTML, PHP, Javascript (js), dll. Apakah syntax highlighter dapat dibentuk diblog gratisan seumpama blogspot?? Tentu dapat donkkk, sekalipun masih belum beli domain TLD, sama seumpama blog aku ini, masih blogspot.
Sebelum memasang di blog sobat, identifikasi dahulu argumentasi kenapa kita perlu menerapkan Syntax Highlighter diblog. Adapun argumentasi sekaligus keistimewaan pemakaian Syntax Highlighter di blog yaitu:
- Merapikan penampilan aksara yang digunakan untuk menulis kode
- Huruf dapat dibentuk berwarna warni
- Memudahkan hadirin memahami dan mendapatkan antara klarifikasi postingan dan source code yang kita tulis dalam postingan blog
- Dapat menawan perhatian hadirin blog sebab penampilan postingan yang rapi
- Tidak menyibukkan hadirin untuk menjalankan copy paste aba-aba yang telah dishare
- Masih banyak lagi
Cara Memasang Syntax Highlighter di Blogger
Jika blog teman-teman sering membagikan kode, alangkah lebih baik jika memasang Syntax Highlighter dengan CSS. Untuk memudahkan dalam pemasangan, silahkan ikuti tindakan berikut.
1. Pertama-tama buka tema blog teman-teman.
2. Jika sebelumnya teman-teman pernah memasang aba-aba CSS .post-body pre dan .post-body pre code silahkan dihapus dahulu biar tidak bentrok dengan yang telah ada.
3. Copy aba-aba berikut kemudian sisipkan "Sebelum atau di Atas" goresan pena </head>.
.post-body pre { background-color: #292E34; /* warna background */ border-left: 5px solid #008c5f; /* kombinasi 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 aksara */ font-size: 12px; /* ukuran aksara */ 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 aba-aba di atas disisipkan diantara <style>...</style>. Bila percaya telah selesai menjalankan tindakan diatas, akhiri dengan dengan klik Save untuk menerapkan di blog sobat, kemudian tutup tema blog.
Cara Menerapkan Syntax Highlighter di Blogger
1. Silahkan buka dashboard blog teman-teman, kemudian klik Postingan baru untuk menuliskan postingan yang akan disisipkan source code.
2. Lalu panggil syntax highlighter dalam postingan teman-teman dengan menggunakan <pre> dan <code>, berikut rujukan penulisannya:
<pre><code> <!-- Masukkan semua aba-aba CSS, HTML atau Javascript disini --> </pre></code> 3. Selesai.
Informasi Penting: Sebelum memasukkan aba-aba CSS, HTML atau Javascript wajib diparse lebih dahulu di Blogcrowds biar tidak menghacurkan penampilan template.
Bagaimana teman-teman, mudahkan? Dengan pemasangan Syntax Highlighter di blog maka postingan teman-teman yang dipublish akan kelihatan rapi dan menarik. Semoga teman-teman yang mencari bimbingan ini dapat terbantu. Semoga bermanfaat. Sekian dan terimakasih.
Sumber: igniel.com