Syntax highlighter merupakan fitur yang digunakan untuk menampilkan kode pemrograman, script, atau markup agar lebih mudah dibaca dan terlihat rapi. Fitur ini biasanya digunakan pada blog yang membahas tutorial pemrograman, Blogger, HTML, CSS, JavaScript, dan berbagai jenis kode lainnya.
Syntax highlighter dapat menampilkan kode dengan format, warna, dan jenis huruf tertentu sesuai dengan bahasa pemrograman yang digunakan. Dengan demikian, pembaca dapat membedakan kode dengan teks biasa pada sebuah artikel.
Pada tutorial ini kita akan membuat syntax highlighter sederhana di Blogger menggunakan CSS dan tag HTML <pre> serta <code>. Syntax highlighter yang digunakan tidak mempunyai variasi warna seperti syntax highlighter pada umumnya, tetapi tampilannya sederhana, ringan, fleksibel, dan mudah diterapkan.
Apa Itu Syntax Highlighter?
Syntax highlighter adalah fitur yang digunakan untuk menampilkan kode program atau script dalam format khusus sehingga lebih mudah dibaca.
Fitur ini sering digunakan sebagai alternatif untuk menampilkan kode HTML, CSS, JavaScript, dan bahasa pemrograman lainnya di dalam artikel.
Pada Blogger, syntax highlighter sederhana dapat dibuat menggunakan CSS tanpa membutuhkan JavaScript tambahan. Kode yang ditampilkan juga dapat digulir secara horizontal maupun vertikal apabila ukurannya lebih panjang dari area yang tersedia.
Berbeda dengan blockquote, teks atau kode pada syntax highlighter dapat tetap mempertahankan format baris dan spasi sehingga lebih sesuai untuk menampilkan kode.
Cara Memasang Syntax Highlighter Sederhana di Blogger
Untuk memasang syntax highlighter sederhana, kita hanya perlu menambahkan kode CSS ke dalam template Blogger.
1. Buka Edit HTML Tema Blogger
Pertama, login ke akun Blogger Anda.
Kemudian buka:
Tema → Edit HTML
Setelah editor HTML tema terbuka, cari kode:
]]></b:skin>2. Tambahkan Kode CSS Syntax Highlighter
Letakkan kode CSS berikut tepat 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;
-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, 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;
}Setelah kode dimasukkan, simpan perubahan pada tema Blogger.
Cara Menerapkan Syntax Highlighter pada Postingan
Setelah CSS berhasil ditambahkan ke tema, syntax highlighter dapat digunakan langsung pada postingan.
1. Buka Postingan Blogger
Buat postingan baru atau buka postingan yang ingin Anda edit.
Kemudian ubah editor postingan ke mode HTML.
2. Tentukan Kode yang Akan Ditampilkan
Cari kode, script, kata, kalimat, baris, atau paragraf yang ingin ditampilkan menggunakan syntax highlighter.
Syntax ini dapat digunakan untuk menampilkan berbagai kode seperti HTML, CSS, JavaScript, dan kode lainnya.
3. Tambahkan Tag Pre dan Code
Sisipkan tag pembuka <pre><code> sebelum kode dan tag penutup </code></pre> setelah kode.
Format dasarnya adalah:
<pre><code>Isi kode HTML, CSS, JavaScript, atau kode lainnya di sini</code></pre>Sebagai contoh, jika ingin menampilkan kode CSS:
<pre><code>.post-body img {
max-width: 100%;
height: auto;
}</code></pre>Setelah postingan diterbitkan, kode tersebut akan ditampilkan menggunakan tampilan syntax highlighter yang sudah dibuat melalui CSS.
Kelebihan Syntax Highlighter Sederhana
Syntax highlighter sederhana ini mempunyai beberapa kelebihan, terutama bagi blog yang sering menerbitkan tutorial coding atau tutorial Blogger.
Ringan dan Sederhana
Syntax highlighter hanya menggunakan CSS sehingga tidak membutuhkan library JavaScript tambahan.
Mudah Dipasang
Pemasangannya cukup dilakukan satu kali pada template Blogger. Setelah itu, Anda dapat menggunakannya pada berbagai postingan dengan tag <pre><code>.
Mudah Digunakan
Anda tidak perlu memberikan class tambahan atau kode JavaScript pada setiap kode yang ingin ditampilkan.
Mendukung Kode Panjang
Properti overflow: auto memungkinkan kode yang terlalu panjang untuk digulir sehingga tidak merusak tampilan halaman.
Kesimpulan
Syntax highlighter dapat menjadi pilihan yang tepat bagi blog yang sering membahas HTML, CSS, JavaScript, Blogger, dan tutorial pemrograman lainnya.
Pada tutorial ini, syntax highlighter dibuat dengan cara sederhana menggunakan CSS dan tag <pre><code>. Metode ini tidak menggunakan JavaScript sehingga relatif ringan dan mudah diterapkan.
Setelah CSS dipasang pada template Blogger, Anda cukup menggunakan format <pre><code>...</code></pre> pada mode HTML postingan untuk menampilkan kode dengan tampilan yang lebih rapi dan mudah dibaca.
Semoga tutorial cara menerapkan syntax highlighter sederhana di Blogger ini bermanfaat dan membantu Anda membuat artikel tutorial coding menjadi lebih nyaman dibaca.
FAQ
Apa itu syntax highlighter di Blogger?
Syntax highlighter adalah fitur untuk menampilkan kode HTML, CSS, JavaScript, atau kode lainnya dalam format khusus agar lebih rapi dan mudah dibaca.
Apakah syntax highlighter sederhana membutuhkan JavaScript?
Tidak. Syntax highlighter pada tutorial ini hanya menggunakan CSS dan tag HTML <pre> serta <code>.
Bagaimana cara menggunakan syntax highlighter pada postingan Blogger?
Buka postingan dalam mode HTML, kemudian letakkan kode di antara tag <pre><code> dan </code></pre>.
Apakah syntax highlighter bisa digunakan untuk kode CSS dan JavaScript?
Ya. Format ini dapat digunakan untuk menampilkan berbagai jenis kode, termasuk HTML, CSS, JavaScript, dan script lainnya.
Apakah syntax highlighter ini bisa menampilkan kode yang panjang?
Ya. CSS yang digunakan memiliki properti overflow: auto, sehingga kode yang panjang dapat digulir tanpa merusak layout halaman.