 |
| Syntax Highlighter |
Blogger.id - Hello sobat bloggeria pada kesempatan kali ini kita akan membagikan dan membahas seputar cara membuat syntax highlighter keren di blogger. Sebelum melangkah ke cara membuat syntax sendiri saya ingin menanyakan satu hal kepada anda. Apa sih itu syntax Highlighter ?
Daftar isi
Jika sobat belum tau jawabannya maka disini saya akan memberikan penjelasan mengenai Syntax Highglighter kenapa disebut Syntax Highlighter, Fungsi atau manfaat sekaligus tutorial lengkap cara membuat Syntax keren, simple di blogger atau blogspot.
Apa Itu Syntax Highlighter ?
Syntax Highlighter (Syntax Highlighting) adalah sebuah fitur yang fungsinya atau tujuannya adalah untuk menyoroti beberapa source kode baik itu CSS, HTML, Js, Javascrip dan masih banyak lagi. Syntax Highlighter umumnya akan menyoroti kode berikut dengan beberapa efek, warna dan gradient yang menarik dan lebih menonjol dibandingkan dengan teks lainnya.
Hal inilah yang membuat syntax ini sangat difungsikan karena dengan memasang syntax di blogger anda. Maka anda bisa memanfaatkannya untuk menyoroti atau menonjolkan source kode yang nantinya ingin anda bagikan ketika itu.
Jika dilihat dan diperhatikan, sebenarnya syntax memiliki tampilan yang sedikit mirip dengan kode Blockquote hanya saja fungsinya yang berbeda. Jika Blockquote hanya difungsikan untuk teks pada umumnya. Sebaliknya jika syntax lebih dikhususkan untuk source kode tertentu.
Berikut ini adalah preview atau contoh Syntax Highlighter simple.
Preview diatas adalah salah satu tampilan atau demo dari syntax highlighter simple dan polos. Tapi disini kita akan mempelajari cara membuat syntax yang berbeda dari preview gambar diatas yang pastinya lebih keren lagi.
Berikut ini adalah demo Syntax Highlighter yang nantinya akan kita terapkan di tampilan blog kita yang pastinya akan lebih bagus dari syntax preview diatas.
Selain keren syntax highlighter diatas juga memiliki fitur lainnya, seperti contohnya ketika link atau code di klik maka akan otomatis memblock tulisan dan menuju klik copy paste. Fitur lainnya yang mungkin anda peroleh dari syntax highlighter berikut akan dijelaskan lebih detail di bawah ini.
Preview Syntax Highlighter
 |
| Preview Tanpa Syntax Highlighter |
 |
| Preview Tanpa Syntax Highlighter |
Preview diatas adalah salah satu tampilan atau demo dari syntax highlighter simple dan polos. Tapi disini kita akan mempelajari cara membuat syntax yang berbeda dari preview gambar diatas yang pastinya lebih keren lagi.
Berikut ini adalah demo Syntax Highlighter yang nantinya akan kita terapkan di tampilan blog kita yang pastinya akan lebih bagus dari syntax preview diatas.
 |
| Preview Syntax |
Selain keren syntax highlighter diatas juga memiliki fitur lainnya, seperti contohnya ketika link atau code di klik maka akan otomatis memblock tulisan dan menuju klik copy paste. Fitur lainnya yang mungkin anda peroleh dari syntax highlighter berikut akan dijelaskan lebih detail di bawah ini.
Fitur dan Kelebihan Syntax Highlighter
Berikut ini adalah merupakan beberapa fitur - fitur yang anda peroleh dengan memasang syntax highlighter di blog anda.
- Mendukung beberapa format bahasa HTML, CSS, JS QUERRY dan sebagainya.
- Support atau mendukung semua browser baik itu Chrome, Mozilla, Opera, Uc dan lainnya.
- Mudah digunakan dan dipasang di blogger.
- Dikhususkan untuk pengguna user.
- Simple dan ringan.
Selain fitur diatas manfaat lainnya yang bisa anda dapatkan adalah yakni, pengunjung akan lebih mudah ketika hendak mengcopy code HTML yang anda siapkan khususnya di tutorial atau metode pembelajaran anda.
Pengunjung juga akan lebih mudah menemukan source code yang mereka cari dan menerapkannya dalam aktivitas tertentu.
Berikut ini adalah langkah - langkah membuat Syntax di blogger dengan mudah.
1. Silahkan login terlebih dahulu kedalam halaman blogger.com
2. Lalu klik theme >> Edit HTML
3. Berikutnya silahkan anda cari kode atau tag (]]</b:skin>)
Pengunjung juga akan lebih mudah menemukan source code yang mereka cari dan menerapkannya dalam aktivitas tertentu.
Cara Mudah Membuat Syntax Highlighter di Blogger
1. Silahkan login terlebih dahulu kedalam halaman blogger.com
2. Lalu klik theme >> Edit HTML
3. Berikutnya silahkan anda cari kode atau tag (]]</b:skin>)
/* syntax highlighter bloggeria-id.blogspot.com */
pre,pre code{color:#FFFFFF}pre{background:#121835;padding:8px 10px;overflow:auto;max-width:100%;text-align:left;margin:10px auto;border-left:3px solid #ff0000}code,pre,pre code{font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}code{color:#FFFFFF}i.klik-url,pre{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}blockquote{font-family:Georgia,serif;color:#141924;border-left:3px solid #dedede;padding-left:8px}
/* Syntax Highlighter Blogger */Cara Memasang / Menerapkan Syntax Highlighter di Postingan Blog
Setelah memasang script diatas langkah selanjutnya adalah mengedit postingan yang ingin ditambahkan syinyax highlighter berikut penjelasannya.
1. Silahkan buka atau edit postingan
 |
| Preview |
<pre><code>Code Anda</pre></code>
5. Terakhir jika telah selesai klik pada publikasikan.
6. Selesai dan lihat hasilnya.
Kesimpulan
Jadi kesimpulan yang bisabisa kita dapatkan pada tutorial kali ini adalah membuat syntax highlighter adalah salah satu fitur pendukung dan bermanfaat khususnya jika niche blog anda berkaitan dengan HTML, CSS, JS, Blogging dan sebagainya.
Untuk itulah alasan saya kenapa membuat tutorial ini. Saya harap tutorial ini bermanfaat untuk anda dan jika ada pertanyaan silahkan tanyakan di kolom komentar dibawah ini.
