Cara memasang dan menerapkan Syntax Highlighter di Postingan Blogger
 Dilihat  Kali
Jumat, 19 Juli 2019

Cara memasang dan menerapkan Syntax Highlighter di Postingan Blogger

Syntax Highlighter adalah fitur editor teks yang menunjukkan atau menyoroti teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilah. Penggunaan Syntax Highlighter memudahkan penulisan kode sumber atau bahasa terstruktur seperti bahasa pemrograman atau bahasa markup. Implementasi dari Syntax Highlighter di halaman web, blog atau forum online sering digunakan sebagai kode pre-sentrik dalam kode sumber contoh (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL , Apache, Haskell, Erlang, Ruby, C ++, Objective C) dan banyak bahasa pemrograman lainnya yang ingin ditampilkan.

Cara kerja dari Syntax Highlighter sendiri hampir sama dengan blockquote, tetapi perbedaannya adalah bahwa fungsi blockquote warna teks biasanya hanya satu warna, untuk mengubah warna sesuai dengan kode asli, itu harus dilakukan secara manual. Jadi, pada dasarnya, highlight sintaks akan efektif dalam proses membuat atau memindahkannya dibandingkan dengan fungsi blockquote.

Selain memperindah tampilan urutan kode dalam postingan blog, penggunaan Syntax Highlighter juga dirancang agar pembaca dapat dengan mudah mengenali jenis kode yang disajikan oleh penulis. Efek dari menggunakan sintaks terkemuka lainnya adalah bahwa pengunjung akan merasa nyaman membaca konten blog, dan untuk administrator blog mereka akan lebih profesional dalam menyajikan artikel dalam tutorial blog mereka.

Cara memasang Syntax Highlighter di Blogger

Perhatikan! kode yang saya bagikan ini akan berfungsi dengan baik jika di situs website kamu sudah memasang jQuery Library. Untuk Tutorial pemasangan jQuery Library kamu bisa melihat caranya disini.
1. Masuk ke Dashboard Blogger > Tema > Edit HTML.
2. Copy kode CSS dibawah ini tepat di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;.

<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>

3. Kemudian tambahkan kode JavaScript berikut ini tepat di atas </body> atau &lt;!--</body>--&gt;&lt;/body&gt;.

<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.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Setelah itu Simpan tema yang telah dirubah ini.

Cara Menerapkan Syntax Highlighter di Postingan Blogger

Setelah memasang kode yang dibutuhkan, langkah selanjutnya adalah cara menerapkannya di dalam postingan. Buat postingan baru di blog, kemudian untuk penulisannya tambahkan kode di bawah ini pada tab HTML (bukan Compose).

<pre><code>TULIS KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>

Ubah kode yang ditandai berwarna merah di atas dengan kode CSS/HTML/JavaScript yang ingin kalian tulis. Khusus untuk kode HTML dan JavaScript parse terlebih dahulu kodenya menggunakan HTML Converter.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.