|
Blog yang membahas tutorial dunia programming tentu banyak menampilkan markup atau source kode pada artikel yang di publikasikan.
Markup kode yang di tampilkan biasanya akan di bungkus dengan syntax higlight untuk menyoroti sintak bahasa pemprograman pada halaman web agar lebih mudah dipahami oleh pengunjung.
Di tutorial kali ini kita akan membahas bagaimana cara membuat syntax highlight mirip seperti tampilan warna github code di blogger.
Table of Contents
Apa itu Syntax Highlight?
Syntax Highlight merupakan fitur untuk menampilkan markup atau source kode pemrograman dengan style warna dan font sesuai dengan bahasa pemrogramannya seperti javascript, css, html, python dan lain sebagainya.
Ini mirip text editor pemrograman seperti notepad++, atom, Sublime Text yang sering digunakan untuk melakukan coding.
Cara Pasang Syntax Highlight di Blogger
Langkah pertama buka Blogger > Tema > Edit HTML.
Berikutnya salin dan tempatkan kode berikut tepat di atas </head> atau </body> template.
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css' rel='stylesheet'/>
<!--[ Highlight Js ]-->
<script type='text/javascript'>//<![CDATA[
document.addEventListener('DOMContentLoaded', (event) => {
const highlight = document.querySelectorAll('pre');
highlight.forEach((el) => {
hljs.highlightElement(el);
});
});
//]]></script>
Dalam contoh ini, karena kita akan membuat syntax highlight mirip seperti tampilan github code maka tautan CSS yang digunakan gaya Github Dark.
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css' rel='stylesheet'/>
Jika kalian ini menyesuaikan warna sesuai selera silakan lihat refensi demo highlight js dan ganti tautan CSS dengan tampilan yang akan digunakan.
Cara Menggunakan Syntax Highlight di Blogger
Jika sudah selesai memasang syntax highlight, lalu bagaimana cara menggunakannya di blog?
Untuk menggunakan syntax highlight kita bisa menggunakan pembungkus kode berikut pada mode HTML teks editor Blogger:
<pre><code> ... </code></pre>
Kemudian letakan kode seperti CSS/HTML/Javascript/ dan sebagainya tepat di dalam tag kode tersebut.
<pre><code>
<!--[ Javascript ]-->
<script type="application/javascript">
function $init() {return true;}
</script>
</code></pre>
Jika kode yang akan di tampilkan berupa javascript/html, kode tersebut harus di parse terlebih dahulu menggunakan tools parse HTML sebelum memasukkan nya kedalam tag pembungkus.
Penutup
Nah itu tadi tutorial cara pasang dan menggunakan syntax highlight mirip Github code. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.