Membahas masalah tentang Syntax Highlighter tentunya tidak luput dari kode-kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman yang bisa membuat kita pusing. Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya?.
Selain dapat mempercantik tampilan blog kalian, syntax highlighter juga bisa untuk meletakkan kode-kode supaya terlihat pendek. Saya akan menjelaskan tentang pengertian dan cara membuat Syntax Highlighter pada artikel di bawah ini. Mari kita simak langkah-langkahnya supaya kalian bisa membuatnya dengan baik.
Pengertian Syntax Highlighter
Syntax Highlighter adalah sebuah alat perangkat lunak yang digunakan untuk menampilkan kode pemrograman dengan cara yang menarik secara visual dengan menerapkan warna dan pemformatan yang berbeda untuk bagian-bagian tertentu dari kode tersebut. Syntax highlighting membuat lebih mudah bagi para programmer untuk membaca dan memahami kode dengan cara yang lebih baik dengan menyoroti kata kunci, variabel, komentar, dan elemen-elemen lainnya dari kode tersebut.
Syntax highlighter umumnya digunakan dalam editor kode dan Integrated Development Environment (IDE) untuk membantu para pengembang mengidentifikasi kesalahan sintaksis dan memudahkan navigasi dalam file kode yang besar. Mereka juga digunakan dalam platform berbagi kode online, blog, dan forum untuk membuat potongan kode lebih mudah dibaca bagi pembaca.
Syntax highlighter bekerja dengan menganalisis kode dan menerapkan gaya yang berbeda pada jenis-jenis elemen yang berbeda dalam kode. Misalnya, kata kunci dapat disorot dengan warna biru, variabel dengan warna hijau, komentar dengan warna abu-abu, dan sebagainya. Warna dan pemformatan yang spesifik yang digunakan dapat bervariasi tergantung pada syntax highlighter yang digunakan dan bahasa pemrograman yang ditampilkan.
Cara Membuat Syntax Highlighter pada Blog
1. Login Blogger > Template > Klik
2. Simpan kode di bawah ini sebelum kode </head>
<script type= 'text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:700}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>
3. Simpan kode di bawah ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.staticaly.com/gh/ariesvenus/blogcozone/2f3ed863/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>4. Bila sudah mengikuti semua langkah diatas Klik simpan tema.
Cara Penulisan Syntax Highlighter
Untuk menuliskan syntax highlighter pada kode pemrograman, Anda dapat mengikuti beberapa langkah sebagai berikut:
<pre><code>
Isi Kode jQuery, Javascript atau Kode CSS atau Kode HTML di sini
</code></pre>- Pilih syntax highlighter yang sesuai dengan bahasa pemrograman yang Anda gunakan. Beberapa syntax highlighter yang populer antara lain Pygments, PrismJS, HighlightJS, dan banyak lagi.
- Masukkan kode pemrograman Anda ke dalam editor yang telah terpasang syntax highlighter tersebut.
- Tambahkan kode atau markup untuk memulai dan mengakhiri blok kode yang ingin Anda soroti. Kode atau markup ini berbeda-beda tergantung pada syntax highlighter yang digunakan. Sebagai contoh, untuk syntax highlighter PrismJS, Anda bisa memulai blok kode dengan tag
<pre> dan menambahkan atributclass dengan nilailanguage-<nama-bahasa-pemrograman> dan mengakhiri blok kode dengan tag</pre> . - Konfigurasi atau atur warna dan format yang ingin Anda gunakan untuk menyoroti elemen-elemen kode tertentu. Ini juga berbeda-beda tergantung pada syntax highlighter yang digunakan. Beberapa syntax highlighter menyediakan konfigurasi default, sementara yang lain memungkinkan pengguna untuk menyesuaikan warna dan format yang diinginkan.
- Simpan atau publikasikan kode Anda dengan syntax highlighter yang sudah Anda atur sebelumnya.
Setelah itu, kode Anda akan ditampilkan dengan warna dan format yang telah Anda atur menggunakan syntax highlighter yang Anda pilih. Hal ini akan memudahkan para pengembang atau pembaca untuk membaca dan memahami kode Anda dengan lebih baik.