Apakah itu syntax highlighter? Syntax highlighter merupakan script yang sanggup memperlihatkan sebuah script yang harus di parse terlebih dahulu. Bagaimana sih contohnya? Berikut ini yaitu pola hasil dari syntax highlighter.
<SEBUAH CONTOH=’KECIL’/> Nah, di artikel ini, aku akan membahas cara memasang script syntax highlighter yang menarik ibarat diatas. Mantap sekali tidak? Hmmm... Jikalau anda merasa itu kurang menarik, anda sanggup meredisign sendiri sekereatif mungkin.
Sebenarnya, aku sendiri mendapat insipirasi css code tersebut dari bloger lain. Tapi, aku lupa namanya. Tapi tetap saja, yang namanya berkreasi, ya tetap berkreasi.
Lalu, bagaimanakah cara menciptakan syntax highlighter tersebut? Berikut ini penjelasannya.
Pemasangan CSS Syntax Highlighter
1. Buka hidangan edit template anda. Untuk pengguna blogger, buka dashboard anda, klik tema, dan pilih edit html.
2. Untuk antisipasi kegagalan pada code, maka coba cari terlebih dahulu code “pre” dan “code” pada skin atau isyarat <style>...</style> di template anda. CTRL+F untuk mempercepat.
3. Jikalau isyarat ditemukan, maka sesuaikan saja isyarat cssnya dengan isyarat dibawah. Apabila tidak, maka pasang isyarat berikut diatas isyarat </b:skin> untuk pengguna blogger dan </style> untuk non-blogger.
pre,code{font-family:"Courier New",Courier,Monospace;color:inherit;padding-left:5px;padding-right:5px;} pre{white-space:pre;word-wrap:normal;overflow:auto;background:#292929;color:#fff;border-left:4px solid #1194f2;} 4. Save template anda
5. Selesai
Memanggil isyarat syntax highlighter
1. Buat sebuah artikel dengan mode html
2. Siapkan isyarat html atau javascript yang akan ditunjukkan dan silakan parse isyarat tersebut. Klik disini untuk melihat tutorial parse kode.
3. Masukkan isyarat berikut ke artikel tersebut dan masih dalam mode html
<pre><code>kode yang telah diparse disini</code></pre> 4. Coba kembangkan text anda
5. Silakan pratinjau terlebih dahulu
6. Publikasikan
7. Selesai
Redisign Syntax Highlighter
1. Kembali ke isyarat css tadi
2. Silakan bedah isyarat tersebut. Hahaha... Untuk mengantisipasi kesalahan pemakaian css, lihat terlebih dahulu klarifikasi ihwal memasang css yang benar disini.
3. Lalu, lihat keterangan dibawah ini untuk mempermudah redisgn.
Font-family : font yang digunakan dalam isyarat tersebut
Padding: jarak yang berada di dalam. Penjelasannya disini.
Background : warna latar
Color : warna text
Border : garis pinggir
Width : ukuran lebar
4. Adapun isyarat yang sanggup ditambahkan untuk menambah kesan menarik. Berikut ini yaitu isyarat tersebut.
Border-radius : Garis pada sudut yang dibentuk melengkung
background: linear-gradient(to right, ... , ...): Warna background bergradien yang keren
5. Nah, untuk isyarat warna sendiri silakan lihat disini.
6. Simpan template anda
7. Selesai.
Bagaimana? Menarik bukan. Dengan script diatas saja anda sudah sanggup menawarkan kesan menarik tanpa adanya isyarat javascript. Lebih lagi, waktu pemuatan yang tidak besar lengan berkuasa secara signifikan. Mantap, bukan. Plus, tidak adanya link credit
Wow... Dengan ketiga kelebihan diatas, pengujung sudah sanggup terpukau. Apalagi aku dan anda sebagai seorang blogger.
Tapi, apa sih sebetulnya fungsi script yang satu ini? Fungsi dari syntax highlighter yaitu memperlihatkan isyarat html yang tak sanggup ditunjukkan apabila tidak diparse. Memang sulit menjelaskannya, terlebih lagi tujuannya ibarat dengan pengertiannya.
Lalu, mengapa aku menjelaskan fungsinya di bab akhir? Karena aku tahu, anda sudah tahu fungsinya, maka dari itu hal yang tak penting aku cantumkan di bab selesai saja, untuk tidak memperlambat waktu anda untuk membaca.
Hmm.. Sepertinya cukup sudah artikel pada kali ini. Ingat untuk membagikan artikel ini ke teman anda dan mengikuti blog ini untuk sanggup mengetahui artikel terupdate lainnya. Terimakasih atas kunjungan anda dan hingga jumpa di artikel lainnya.
