Syntax Highlighter merupakan fitur editor teks yang digunakan untuk menyoroti atau menampilkan berbagai jenis kode pemrograman, skrip atau markup, HTML, CSS, Javascript dan sebagainya. Fitur ini akan menampilkan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis sesuai dengan kategori dari kode bahasa pemrograman itu sendiri.
Selain untuk mempercantik tampilan baris kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan agar pembaca lebih nyaman membaca isi konten blog dan mudah mengenali jenis kode yang di berikan penulis. Selain itu, juga memberikan kesan Professional dalam menyajikan artikel atau tutorial bagi penulis atau admin blog.
Jadi penggunaan Syntax Highlighter di blog tentu sangat penting, apalagi jika anda membahas tutorial atau artikel seputar Bahasa Pemrograman di blog anda. Jadi ada baiknya anda memasang Syntax Highlighter di blog anda.
Nah, jika anda tertarik untuk memasang Syntax Highlighter di blog, silahkan ikuti tutorial Cara Memasang Syntax Highlighter di Postingan Blog.
Cara Memasang Syntax Highlighter di Postingan Blog
Pertama, login ke Blogger. Lalu pilih menu Theme > lalu klik menu Edit HTML. Setelah itu tambahkan kode CSS di bawah sebelum </head> atau </head><!--<head/>-->
Perhatian!
Kode yang saya bagikan ini berfungsi dengan baik pada blog yang sudah menambahkan jquery library, seperti <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Jadi jika anda belum menambahkannya, saya sarankan menambahkannya sebelum </head> atau </head><!--<head/>-->
<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:bold}
.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>Cara Penggunaan Syntax Highlighter di Postingan Blog
Setelah memasang kode di atas, berikutnya adalah cara penggunaanya. Buka Postingan anda atau Buat Postingan baru, lalu gunakan mode HTML bukan Compose.
Selanjutnya gunakan tag <pre><code>. Contoh:
<pre><code>__Tambahkan Kode HTML/CSS/JAVASCRIPT DLL Disini__</code></pre>Silahkan ganti kode yang ditandai tersebut dengan Kode HTML, CSS, Javascript atau Kode Bahasa Pemrograman lain. Khusus untuk kode HTML dan Javascript atau kode bahasa pemrograman yang memiliki karakter & ' " < > , silahkan di Parse terlebih dahulu dengan HTML Parse
Oke sekian saja artikel tentang Cara Memasang Syntax Highlighter di Postingan Blog, semoga bermanfaat. Dan sampai ketemu di artikel selanjutnya. γγγΎγ。π
https://www.arlinadzgn.com/2018/06/cara-memasang-syntax-highlighter-di-blogger.html
https://github.com/isagalaev/highlight.js