Code Snippet & Syntax Highlighting di Blogger (Highlight.js)
if ( you want to create a code snippet like this == true) {
read this article;
} else {
exit;
}
Jika kamu seorang blogger dengan topik software, tech, dan topik lain yang perlu menaruh snippet code pada postingan blogger mu, maka kamu perlu membuatnya dengan cantik dan mudah dibaca. Disini saya akan memberi cara untuk melakukan hal tersebut dengan menggunakan highlight.js.
Berikut langkah yang harus kamu lakukan:
1. Menentukan tema yang akan digunakan.
Untuk menentukan tema kamu bisa pergi ke laman http://highlightjs.org. Pada beranda akan disuguhkan dengan tampilan tema yang dipilih. Kamu bisa mengganti2 bahasa dan tema yang digunakan, lalu pilih tema sesuai selera.
2. Edit tema blogger (Edit HTML).
3. Import highlight.js .
Paste code tersebut di bawah tag <head>.
<link href='https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css' rel='stylesheet'/>
<link href='https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/<tema-yang-digunakan>.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js'/>
<script>
hljs.configure({cssSelector: "code"});
hljs.highlightAll();
</script>
4. Menambahkan custom css.
Disini saya membuat custom style seperti menambahkan border-radius, font-size, dan box-shadow agar tidak terlalu kaku. Paste setalah code diatas.
<style>
pre code {
font-size:14px;
box-shadow:0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
border-radius:10px;
overflow:hidden;
overflow-x:auto;
padding:20px;
position:relative;
}
</style>
5. Simpan perubahan.
6. Membuat post untuk testing. Untuk membuat snippet harus menggunakan editor HTML, lalu masukan code snippet ke <pre><code></code><pre> . Berikut contoh penggunaan nya.
7. Berikut hasilnya.
Berikut yang bisa saya bagikan, semoga bisa bermanfaat untuk teman-teman yang membuat blog di blogger. Sampaii bertemu lagi, semoga?
Tags:
Tech