Friday, January 31, 2020

Cara Menggunakan Syntax Highlight pada Blog dengan Prettify


Penulis kali ini akan membahas Cara Melakukan Syntax Highlight pada Blog dengan Pretty Print. Syntax Highlight adalah fitur yang biasanya terdapat pada text-editor agar setiap teks maupun kode pemrograman mempunyai warna yang berbeda-beda tergantung pada kategorinya. Namun Syntax Highlight yang Penulis bagikan kali ini ialah syntax highlight pada blog-blog artikel pemrograman. 

Sebagai Blogger yang fokus pada dunia pemrograman tentunya ingin berbagi ilmu dengan pemula-pemula seperti mahasiswa maupun yang lainnya. Terkadang Penulis juga sering kesulitan ketika membuat sebuah project sehingga membutuhkan bantuan petunjuk dari forum maupun blog. Source code yang dibagikan mempunyai jarak pemisah seperti sebuah container terlihat menarik dibanding source code yang polos tidak mempunyai warna dan jarak pemisah dengan kalimat pada blog. Pada artikel-artikel yang terdapat pada Blog ini sendiri belum menggunakan Syntax Highlight, namun Penulis akan menerapkan fitur ini pada artikel-artikel yang akan Penulis bagikan kedepannya.

Syntax Highlighter yang Penulis gunakan sendiri adalah Prettify yang dikembangkan oleh Google. Terdapat berbagai Syntax Highlighter yang dapat digunakan oleh pembaca semua, namun pada postingan kali ini Penulis memilih Prettify dikarenakan dikembangkan oleh Google sehingga Penulis yakin fitur ini bersifat Long Term Supported sehingga tidak perlu mengedit html code pada Blogger dikemudian hari. 

Penggunaannya sendiri sangat mudah, cukup paste cdn.js dibawah ini setelah bagian <head> maupun sebelum </head>. 
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

Lalu pada bagian sebelum bagian code diberikan syntax <pre class="prettyprint"> dan berikan penutup </pre>

Contoh :
<pre class="prettyprint"> isi source code anda dibagian ini...  </pre>

Sebagai catatan, jika source code yang ingin anda cantumkan didalam syntax highlighter mempunyai tanda maupun maka anda harus mengubah tanda < menjadi &lt; dan tanda > menjadi &gt; dikarenakan ketika syntax highlighter melakukan render, hasilnya menjadi tampilan dari source code tersebut. Anda juga dapat mengunjungi LINK INI jika syntax yang ingin anda ubah terlalu banyak. 

Sekian tutorial kali ini, semoga bermanfaat ya.
Load disqus comments

0 comments