Cara Memasang Syntax Highlighter di Postingan

Table of Contents

Artikel berikut saya akan menjelaskan sedikit dan berbagi tutorial singkat bagaimana cara memasang Syntax Highlighter dalam postingan.

Mungkin dari Anda atau pengunjung blog ini belum tahu bagaimana cara memasang syntax highlighter dalam postingan atau artikel.

Syntax Highlighter pada umumnya di gunakan para blogger untuk menampilkan kode atau skrip kedalam format teks. Selain dapat menyesuaikan skrip dalam format penulisan yang sebenarnya.

Berikut saya akan memberikan cara dan membagikan skrip Syntax Highlighter pada postingan untuk masalah tersebut.

Memasang Syntax Highligther di Postingan Template

• Masuk menu Blogger
• Pilih Tema, klik Edit HTML
• Terapkan kode berikut di atas kode </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>

Kode ini dapat berfungsi dengan baik jika di blog Anda sudah terdapat jQuery library, jika belum ada tambahkan skrip berikut sebelum kode </sytle>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

• Kemudian tambahkan kode 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.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>

• Kemudian simpan

Contoh format penulisan:

<pre><code>__KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>
<pre><code>
<h1>
  <span>ANDDSEO</span>
  <span>BLOG SEPUTAR</span>
  <span>TEMPLATE, TEKNOLOGI DAN TUTORIAL BLOG</span>
</h1>
</code></pre>

Memasang Syntax Highlighter dalam Postingan

Setelah menerapkan kode di atas, tulis kode kedalam mode compose, lalu memberikan tambahkan kode melalui mode HTML.

<pre><code>KODE CSS/HTML/JS DISINI</code></pre>

Dengan mengikuti langkah-langkah diatas, Anda telah berhasil memasang Syntax Highlighter dalam postingan.