Apakah itu syntax highlighter? Syntax highlighter merupakan script yang sanggup memperlihatkan sebuah script yang harus di parse terlebih dahulu. Bagaimana sih contohnya? Berikut ini ialah rujukan hasil dari syntax highlighter.
<SEBUAH CONTOH=’KECIL’/> Nah, di artikel ini, aku akan membahas cara memasang script syntax highlighter yang menarik menyerupai 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 sajian 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 arahan <style>...</style> di template anda. CTRL+F untuk mempercepat.
3. Jikalau arahan ditemukan, maka sesuaikan saja arahan cssnya dengan arahan dibawah. Apabila tidak, maka pasang arahan berikut diatas arahan </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 arahan syntax highlighter
1. Buat sebuah artikel dengan mode html
2. Siapkan arahan html atau javascript yang akan ditunjukkan dan silakan parse arahan tersebut. Klik disini untuk melihat tutorial parse kode.
3. Masukkan arahan 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 arahan css tadi
2. Silakan bedah arahan tersebut. Hahaha... Untuk mengantisipasi kesalahan pemakaian css, lihat terlebih dahulu klarifikasi perihal memasang css yang benar disini.
3. Lalu, lihat keterangan dibawah ini untuk mempermudah redisgn.
Font-family : font yang digunakan dalam arahan tersebut
Padding: jarak yang berada di dalam. Penjelasannya disini.
Background : warna latar
Color : warna text
Border : garis pinggir
Width : ukuran lebar
4. Adapun arahan yang sanggup ditambahkan untuk menambah kesan menarik. Berikut ini ialah arahan tersebut.
Border-radius : Garis pada sudut yang dibentuk melengkung
background: linear-gradient(to right, ... , ...): Warna background bergradien yang keren
5. Nah, untuk arahan warna sendiri silakan lihat disini.
6. Simpan template anda
7. Selesai.
Bagaimana? Menarik bukan. Dengan script diatas saja anda sudah sanggup memperlihatkan kesan menarik tanpa adanya arahan 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 gotong royong fungsi script yang satu ini? Fungsi dari syntax highlighter ialah memperlihatkan arahan html yang tak sanggup ditunjukkan apabila tidak diparse. Memang sulit menjelaskannya, terlebih lagi tujuannya menyerupai 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 final 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.