Cara Memasang Syntax Highlighter di Postingan Blog

Cara Memasang Syntax Highlighter di Postingan Blog

Cara Memasang Syntax Highlighter di Postingan Blog
Memasang Syntax Highlighter di blog akan mempercantik tampilan postingan pada blog. Selain itu, dengan memasang Syntax Highlighter di blog juga akan menambah kesan profesional pada blog itu sendiri.

Memasang Syntax Highlighter juga akan membuat pengunjung mudah membaca serta memahami jenis kode yang diberikan oleh penulis yang tentunya menambah kenyamanan para pengunjung blog.

Syntax Highlighter adalah fitur khusus berupa proses pemindahan kode bahasa pemrograman tertentu dengan warna teks, tulisan, dan posisi yang sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk disalin maupun dipindahkan ke dalam bentuk tulisan lain agar lebih mudah dalam membaca dan mempelajarinya.

Syntax Highlighter hampir mirip dengan blockquote, akan tetapi pada blockquote fitur warna teksnya biasanya hanya satu warna saja dan jika ingin mengubahnya harus dilakukan secara manual, jadi ribet kan.

Intinya simple, dengan memasang Syntax Highlighter di blog akan lebih efektif dalam proses pembuatan maupun pemindahannya daripada menggunakan fitur blockquote.

Cara Memasang Syntax Highlighter di Postingan Blog

Cara Memasang Syntax Highlighter di Postingan Blog
1. Buka Blog → Template → Edit HTML
2. Terapkan kode berikut tepat diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
Perhatikan, kode ini akan berfungsi dengan baik jika di blog sudah menambahkan jquery library. Contoh jquery library : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<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 ini sebelum kode </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.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Save template.

Cara Penulisan Syntax Highlighter di Postingan Blog

Setelah menerapkan kode diatas kedalam template blog sobat, simak langkah-langkah berikut untuk penulisannya di postingan.

Dalam penulisannya, sobat ubah dulu ke dalam mode HTML (bukan compose).

Cara Memasang Syntax Highlighter di Postingan Blog

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti kata yang ditandai dengan kode CSS/HTML/JAVASCRIPT.
Khusus untuk kode HTML/JAVASCRIPT silahkan diparse dulu dengan HTML Converter.

Contoh Penulisan Syntax Highlighter di Postingan Blog
<pre><code><h1>
  <span>SANTAIBARENG.NET</span>
  <span>BERBAGI DAN BELAJAR BERSAMA</span>
  <span>BISNIS ONLINE, TEKNOLOGI DAN TUTORIAL BLOG</span>
</h1></code></pre>

Keterangan :
Kode yang ditandai merupakan letak kode yang nantinya akan sobat tambahkan.
Semoga berhasil dan bermanfaat.
Terimakasih.

Source : https://www.arlinadzgn.com/2018/06/ara-memasang-syntax-highlighter-di-blogger.html

Loading...

Share This :
Santai Bareng

Ayo bergabung bersama kami untuk Belajar & Berbagi Bersama di SANTAIBARENG.NET

IBX59EDC09435840