Cara Lengkap Membuat Syntax Highlighter Ringan di Viomagz
Template viomagz versi 2.7.5 yang digunakan pada blog ini terbilang sudah jadul. Namun dengan penambahan beberapa fitur, template ini masih terlihat bagus dan tidak kalah dari template viomagz yang paling update.
Salah satu fitur yang berhasil saya tambahkan dalam blog ini adalah syntax highlighter super ringan dan memiliki tampilan bagus. Syntax Highlighter yang saya gunakan ini hanya sedikit menambah kode saja, karena syntax highlighter ini masih memanfaatkan syntax bawaan dari template viomagz, sehingga blog anda tidak akan menambah beban loadingnya.
Ok, sebelum lanjut ke cara membuat syntax highlighter di template viomagz, silahkan anda baca terlebih dahulu apa itu syntax highlighter.
Apa Itu Syntax Highlighter?
Syntax highlighter adalah sebuah fitur text editor dalam bahasa pemrograman. Syntax Highlighter memungkinkan kita untuk menulis script atau markup seperti HTML, CSS, dan javascript dalam blog secara terpisah dan nonaktif.
Fitur syntax highlighter bisa memfasilitasi penulisan bahasa pemrograman seperti Javascript, CSS, HTML, XML, PHP, Phyton, Java, SQL, C++ dan bahasa pemrograman lainnya dalam blog.
Namun biasanya syntax highlighter yang digunakan dalam blog lebih merujuk kepada memberikan kemudahan bagi pengunjung yang mencari informasi mengenai kode CSS atau Javascript yang berkaitan dengan blogger.
Cara Membuat Syntax Highlighter Ringan di Viomagz
Berikut ini adalah beberapa langkah yang harus anda lakukan ketika ingin membuat sebuah postingan yang menggunakan syntax highlighter.
- Buat postingan baru
- Pilih mode HTML
Selanjutnya, silahkan anda copy kode dibawah ini dan letakan pada postingan anda.
<pre><pre style="background-color: #393e48; border-radius: 8px; border: 8px solid transparent; box-shadow: rgb(204, 204, 204) 0px 0px 2px; color: #cccccc; font-family: "Courier New", Courier, monospace; font-size: 12px; margin-bottom: 1.5em; margin-top: 15px; max-height: 280px; overflow-wrap: normal; overflow: auto; padding: 10px; user-select: text; width: auto;">kode disini</pre></pre><p></p><p></p>
Setelah selesai, silahkan pindahkan mode menulis anda ke tampilan compose. Maka kurang lebih tampilannya akan sangat mirip dengan syntax hilighter dalam blog ini.
Untuk menyimpan kode yang akan anda masukan kedalam syntax tersebut, maka anda tinggal klik kode disini.
Apabila anda ingin bereksperimen dengan code diatas, maka perhatikan kode yang saya tandai dengan warna kuning, orange dan hijau. Carilah settingan yang pas untuk blog anda, karena yang saya bagikan merupakan settingan untuk blog ini.
Apakah Blog Wajib Menggunakan Syntax Highlighter?
Sebenarnya hampir semua pembuat template blogger sudah memberikan fitur syntax highlighter. Namun terkadang tampilan syntax hilighter bawaan template tidak bagus seperti yang dibayangkan.
Contoh syntax highlighter bawaan template viomagz versi 2.7.5 yang digunakan blog ini.
<pre><code>Kode disini</code></pre>Sangat sederhana sekali bukan?
Oleh karena itu saya mencoba memodifikasi kode syntax highlighter tersebut agar sedikit lebih cantik.
Nah untuk jawaban dari pertanyaan diatas adalah tidak semua blog itu perlu syntax highlighter, karena meski dalam templatenya sudah tersedia fitur tersebut, namun tidak semua blogger membahasa tentang kode atau script dalam blognya.
Namun apabila anda adalah seorang blogger yang suka membagikan script CSS atau HTML seperti blog ini, maka anda wajib menggunakan syntax highlighter agar kode yang ditulis terbungkus dalam kolom syntax yang rapih. Sehingga pengunjung tidak akan sulit membedakan mana tulisan dan mana kodenya.
Syntax Highlighter Dalam Kata, Kalimat, dan Paragraf
Banyak blog yang membagikan cara membuat syntax highlighter untuk blog, namun sangat sedikit yang membahas atau memberikan tutorial cara membuat highlight dalam kalimat.
Jadi sekalian saja dalam artikel ini saya akan membagikan kode highlight dalam kata, kalimat, atau paragraf yang saya buat dengan memodifikasi syntax highlighter yang saya bagikan diatas.
Syntax Highlighter Kata
<mark><mark style="background-color: #393e48;border-radius: 3px; border: 3px solid transparent; box-shadow: rgb(204, 204, 204) 0px 0px 0px; color: #cccccc; font-family: "Courier New", Courier, monospace; font-size: medium; margin-bottom: 1.5em; margin-top: 5px; max-height: 80px; overflow-wrap: normal; overflow: auto; padding: 5px; user-select: text; width: auto;"> Simpan kode disini... </mark></mark>
Cara mengaplikasikan kode tersebut cukup mudah, anda tinggal pindahkan mode tulisan ke HTML, lalu masukan kode diatas kedalam kata yang akan anda highlight dalam kalimat.
Lihat gambar dibawah ini!
Maka hasilnya akan seperti dibawah ini:
Cari dan simpan kode dibawah ini sebelum </body>
Bagaimana, mudah bukan?
Perlu dicatat bahwa syntax highlighter dan highlighter dalam kalimat yang saya buat ini hanya baru dicoba dalam template viomagz versi 2.7.5 yang digunakan blog ini.
Jadi saya belum tau apakah kode ini berfungsi pada template lain.
Kelebihan menggunakan syntax highlighter yang saya bagikan ini adalah meski blog anda menggunakan script anti blok (CTRL+A) dan anti copy paste, script yang ada dalam kolom syntax tetap bisa diblok dan di copy oleh pengunjung.
Untuk membuat script yang ada pada kolom syntax hilighternya bisa di copy denga mudah, maka gunakan script double click to select dibawah ini agar pengunjung lebih mudah saat mengcopy paste script kode nya.
Double Click to Select
<!--double klik syntax hilighter-->
<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('pre,code');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
//]]>
</script>Nah itulah cara lengkap membuat syntax highlighter di template viomagz.
Semoga bermanfaat.
Posting Komentar