Dotycat.come Cara Membuat Syntax Highlighter BerWarna
Cara Membuat Syntax Highlighter BerWarna
Cara Membuat Syntax Highlighter BerWarna

Cara Membuat Syntax Highlighter BerWarna

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

Add Comment
Cara Membuat Syntax Highlighter BerWarna

Cara Membuat Syntax Highlighter BerWarna

DotyCat - Teaching is Our Passion DotyCat - Teaching is Our Passion DotyCat - Teaching is Our Passion DotyCat - Teaching is Our Passion