2 Cara Membuat Syntax Highlighter di Blogger
Penggunaan syntax highlighter untuk mencantumkan source code di postingan sangatlah penting. Hal ini dapat membuat tampilan dari kode tersebut menjadi tidak berantakan. Ditambah lagi untuk mempermudah pembaca mengenali css, html, javascript dan kode pemrograman lainnya.
Dengan menggunakan syntax highlighter, kode yang sebelumnya berantakan dan monoton akan menjadi lebih terstruktur juga enak dilihat.
Pengguna highlighter biasa blog yang berniche tutorial widget blogger, yang memberikan cara untuk menampilkan koding dalam postingan artikelnya. Tidak ada ruginya apabila kamu memasang syntax highlighter di postingan blogger.
Pengertian Syntax Highlighter
Syntax Highlight adalah fitur pada text editor untuk menyoroti penulisan kode dan berfungsi untuk mempermudah dibaca dan dipahami.
Membuat syntax highlighter pada postingan yang menampilkan koding seperti css, javascript, html dan lain-lain sangatlah penting. Dalam menampilkan highlighter ini pada postingan blogger biasanya menggunakan tag pemanggil pre.
Sebelum menggunakan syntax highlighter dipostingan, kamu harus memarse kode-kode tersebut. Tools ini (parse online) dapat kamu kunjungi untuk parse kode-kode agar tidak error.
Nah, agar pembaca tidak repot men-drag kode-kodenya, saya akan beri tutorial membuat syntax highlighter dengan fungsi salin kode.
Cukup dengan double klik untuk menyalin semua kode di dalam syntax highlighternya.
Kekurangannya tutorial yang saya bagikan ini, belum memiliki warna pada kode yang disorot. Tapi ya gakpapa, cara ini cukup ringan untuk di implementasikan dalam setiap postingan yang membutuhkan penampungan kode.
Demo dalam membuat syntax highlight kira-kira akan seperti ini.
Cukup menarik bukan?
Manfaat Syntax Highlighter
Penggunaan syntax highlighter mempunyai beberapa manfaat untuk meningkatkan kualitas tampilan pada postingan blog. Berikut ini adalah manfaat syntax highlighter antara lain ;
- Meningkatkan keterbacaan kode CSS, HTML, JavaScript dan kode lainnya agar mudah dipahami.
- Memberikan kesan profesional pada tampilan postingan artikel blog.
- Membantu pembaca untuk melihat struktur dan logika di balik implementasi kode tersebut.
Penggunaan highlighter ini sangat membantu untuk mengembangkan tampilan postingan blogger, dan cocok untuk konten dengan topik tutorial yang mengharuskan menampilkan source code.
Cara Membuat Syntax Highlighter
Tutorial ini saya bagikan menjadi dua cara untuk memasang syntax highlighter di blogger, dengan menggunakan atribut tag <div class="pre"><pre> dan <pre><code>. Silahkan dipilih suka dengan cara yang mana, hasilnya juga akan sama.
Tambahan juga, tutorial dibawah ini saya tambahkan fungsi salin kode dengan 2x klik untuk menyalinnya.
Fungsi salin ini bertujuan untuk mempermudah pembaca agar langsung menyalin tanpa harus mendrag kode tersebut.
Syntax Highlighter Versi 1
Silahkan masuk ke dasboard Tema Blogger dan pilih Edit HTML.
Salin kode css di bawah ini dan tempelkan diatas kode </style>.
:root {
--bs-body-color: #444;
--synBg: #f6f6f6;
--bd-color: #cdcdcd
}
pre{display:block;position:relative;color:var(--bs-body-color);background-color:var(--synBg);margin:1.7em auto;padding:20px;border-radius:4px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;direction:ltr;white-space:pre}
pre i{color:var(--bs-body-color);font-style:normal}
.pre:not(.tb):hover::before{content:'Double click to copy';display:flex;justify-content:flex-end;position:absolute;top:0;left:0;right:0;padding-inline:10px;color:var(--bs-body-color);background-color:inherit;font-size:11px;line-height:30px;z-index:1;opacity:1}
.pre:not(.tb):hover::before{display:flex;justify-content:flex-end;position:absolute;top:0;left:0;right:0;padding-inline:10px;color:var(--bs-body-color);background-color:inherit;font-size:11px;line-height:30px;z-index:1;opacity:1}
.pre:not(.tb).css:hover::before,.pre:not(.tb).html:hover::before,.pre:not(.tb).js:hover::before,.pre:not(.tb):hover::before{content:'Double click to copy'}
.pre.tb {font-size:.93rem; margin:0}
.pre{color:var(--bs-body-color);background-color:var(--synBg);border:1px solid var(--bd-color);border-radius:4px;direction:ltr}
.pre:not(.tb){position:relative;margin:1.7em auto;overflow:hidden}
.pre:not(.tb)::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;top:0;left:0;right:0;padding-inline:10px;color:var(--bs-body-color);background-color:inherit;font-size:11px;line-height:30px;z-index:1;opacity:1}
.pre:not(.tb).html::before{content:'.html'}
.pre:not(.tb).css::before{content:'.css'}
.pre:not(.tb).js::before{content:'.js'}
.pre:not(.tb).custom::before{content:attr(data-text)}
.pre pre,.pre.tb pre{margin:0;padding-top:30px;color:inherit;background-color:inherit}
.pre:not(.tb,:hover)::before{opacity:1;visibility:visible}
.copyCode span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background-color:var(--synBg);color:var(--bs-body-color);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px;box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}@media screen and (max-width:500px){.copyCode span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}.dark-mode .copyCode span{box-shadow:0 10px 40px rgba(0,0,0,.2)}Selanjutnya, mengaktifkan fungsi salin kode dengan double klik untuk menyalin seluruh kode yang didalam syntax highlighter. Silahkan copy kode javascript dibawah ini, dan tempelkan diatas kode /body.
<script>/*<![CDATA[*/ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#cpCode").innerHTML="<span><i class='clipboard'></i>Copied to clipboard!</span>"},!1); /*]]>*/</script>
<div class='copyCode' id='cpCode'/>Setelah menempelkan semua kode seperti langkah-langkah diatas, buat postingan dengan menambahkan kode HTML berikut ini untuk membuat syntax highlighter.
- Menampilkan kode untuk html.
<div class="pre html"> <pre> Isi kode... </pre> </div> - Menampilkan kode untuk css.
<div class="pre css"> <pre> Isi kode... </pre> </div> - Menampilkan kode untuk javascript.
<div class="pre js"> <pre> Isi kode... </pre> </div>
Selesai, highlighter telah berhasil dipasang.
Syntax Highlighter Versi 2
Cara yang kedua ini hasilnya juga sama dengan seperti diatas. Cuma bedanya menempelkan atribut tag pemanggil dengan <pre><code>. Berikut langkah-langkah membuat syntax highlighternya ;
Silahkan salin kode css dibawah ini dan tempelkan tepat diatas kode </style>.
:root {
--bs-body-color: #444;
--synBg: #f6f6f6;
--bd-color: #cdcdcd;
}
code,pre{font-size:13px}
pre,pre code{display:block}
pre,pre::before{color:var(--bs-body-color)}
pre{background-color:var(--synBg);direction:ltr;position:relative;border-radius:3px;margin:1.7em auto;border:1px solid var(--bd-color);padding:20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;overflow:auto;direction:ltr;white-space:pre}
code{display:inline;padding:5px;border-radius:3px;line-height:inherit;color:var(--bs-body-color);background-color:var(--synBg);}
pre code{background:0 0;padding:.5em;overflow-x:auto}
pre::before{content:'</>';display:flex;justify-content:flex-end;position:absolute;right:0;top:0;width:100%;background:transparent;font-size:10px;padding:0 10px;z-index:2;line-height:30px}
pre.html::before{content:'.html'}
pre.css::before{content:'.css'}
pre.js::before{content:'.js'}
pre.css:hover::before,pre.html:hover::before,pre.js:hover::before,pre:hover::before{content:'Double click to copy'}
.copyCode span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background-color:var(--synBg);color:var(--bs-body-color);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px;box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:.1s;animation:2s forwards slideinwards;-webkit-animation:2s forwards slideinwards}
@media screen and (max-width:500px){.copyCode span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}Selanjutnya, buat postingan blogger dengan menggunakan tag pemanggil berikut ini.
- Kode untuk nenampilkan HTML.
<pre class="html"> <code> Isi kode disini... </code> </pre> - Kode untuk nenampilkan css.
<pre class="css"> <code> Isi kode disini... </code> </pre> - Kode untuk nenampilkan javascript.
<pre class="js"> <code> Isi kode disini... </code> </pre>
Nah, membuat syntax highlighter berhasil dipasang di blogspot.
Pada css :root, kamu dapat menyesuaikan sendiri warna sesuai keinginanmu.
Untuk membuat postingan dengan mencantumkan source code, kamu harus memarse kode tersebut kedalam syntax highlighternya agar dapat dipasang dipostingan blogger.
Tutorial yang saya berikan ini tidak memiliki warna setiap kode yang akan disorot, kalaupun ingin berwarna pada syntax highlighternya harus menambahkan lagi javascript. Akan tetapi, versi tutorial ini cukup ringan untuk loading blog.
Sekedar tambahan, kamu dapat menambahkan baris angka pada syntax highlighter.
Tutorial tersebut saling berkaitan apabila kamu ingin menerapkannya, silahkan kunjungi artikelnya.
Penutup
Membuat syntax highlighter ini sangat berguna untuk menempatkan source kode postingan blogger. Selain itu, dengan menambahkan fungsi salin agar pembaca dapat mudah langsung menerapkannya dari tutorial yang diberikan.
Ok, sekian cara membuat syntax highlighter di blogger. Semoga bermanfaat.
Posting Komentar