Fitur ini menampilkan kode script dalam warna dan font yang berbeda sesuai dengan kategori dari bahasa pemrograman itu sendiri, tujuannya pun agar mudah dibaca dan terlihat rapih.
Syntax ini biasanya dimanfaatkan oleh blog yang memuat tutorial yang berkaitan dengan koding sebagai pengganti "kolom copy paste" teks area dan blockquote.
Perbedaannya adalah syntax hightlighter isi teks melebar kesamping, sedangkan blockquote isi teks memanjang kebawah.
Syntax hightlighter di posting ini memiliki tipe yang sederhana, hanya menggunakan kode CSS dan tidak memiliki warna variasi seperti pada umumnya, kelebihannya adalah lebih fleksibel dan mudah digunakan.
2. Berikutnya anda masukkan kode berikut ini di atas kode ]]></b:skin>
1. Saat anda menulis postingan, silahkan anda rubah penulisan ke mode penulisan HTML.
2. Cari teks, kata, kalimat, baris atau paragraf yang akan dimasukkan ke syntax hightlighter.
3. Sisipkan tag pembuka pre di awal teks dan tag penutup di akhir teks, contoh formatnya sebagai berikut.
Syntax hightlighter di posting ini memiliki tipe yang sederhana, hanya menggunakan kode CSS dan tidak memiliki warna variasi seperti pada umumnya, kelebihannya adalah lebih fleksibel dan mudah digunakan.
Cara memasang Syntax hightlighter sederhana di blogger
1. Pertama anda klik Tema, Edit HTML.2. Berikutnya anda masukkan kode berikut ini di atas kode ]]></b:skin>
.post-body pre {
background-color: #edf7ff;border-left: 5px solid #dbefff;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: #666;font-size: 14px;
max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:Philosopher; 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
}
Menerapkan Syntax hightlighter sederhana di postingan
2. Cari teks, kata, kalimat, baris atau paragraf yang akan dimasukkan ke syntax hightlighter.
3. Sisipkan tag pembuka pre di awal teks dan tag penutup di akhir teks, contoh formatnya sebagai berikut.
<pre><code> isi teks, kata, kalimat, baris atau paragraf yang berisi kode HTML, CSS, javascript </code></pre>
Demikianlah cara memasang syntax hightlighter sederhana di blogger, semoga bermanfaat dan mari belajar, mencatat dan berbagi.
No comments:
Post a Comment