Cara Membuat Syntax Highlighter BerWarna

Cara Membuat Syntax Highlighter BerWarna

December 27, 2018

Assalamualaikum.
kali ini saya akan kongsikan cara membuat syntax highlighter full color atau berwarna terbaru, seperti yang saya gunakan di dalam blog ini.

Cara Membuat Syntax Highlighter BerWarna

Buka Dashboard Blogger > Tema > Edit HTML. Cari kode </head>  lalu letakkan kode CSS berikut ini tepat diatasnya.
/* Highlighter */
.post-body code{padding:1.2em}
.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}
.BLOG_mobile_video_class{display:none!important}.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}

Tambahkan juga code js berikut sebelum </body>:
<script type='text/javascript'>         
//<![CDATA[
// Highlighter Double Click
$('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>

<script src='https://cdn.rawgit.com/galih977/prisma/d77df66d/galihhighlight.js'/>

Untuk penggunaannya, kamu tinggal menggunakan kode ini.
Pilih sesuai jenis kode yang anda inginkan.

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript hljs"> CODE ANDA DI SINI</code></pre>

<pre title="JQueryku" data-codetype ="JQueryku"><code class="JQueryku"> CODE ANDA DI SINI</code></pre>

<pre title="CSS" data-codetype ="CSSku"><code class="language-css hljs"> CODE ANDA DI SINI</code></pre>

<pre><code class="hljs xml"> CODE ANDA DI SINI</code></pre>

Untuk demo boleh cek dalam blog ini.
Naa senang bukan.

Thanks, O4U Admin.

Load Comments