Cara Membuat Syntax Highlighter Full Color di Blogger

Cara Membuat Syntax Highlighter Full Color di Blogger - Beberapa blog yang membahas desain web masih setengah-setengah dalam berbagi ilmu. Contohnya untuk berbagi cara membuat syntax highlighter full color atau berwarna. Saya lihat masih sedikit yang berbagi. Jika ada, hanya sebatas prisma highlighter sederhana saja.

Berbekal sedikit pengetahuan tentang Css, Html dan Javascript, saya mengintip kode yang website sebelah pakai. Dan hasilnya dapat!!

Dan, berhubung saya orangnya baik hati, akan saya bagikan tutorial Syntax berikut ini.

Cara Membuat Syntax Highlighter Full Color di Blogger

Ikuti langkah-langkah berikut ini dengan baik dan benar. Jika ada salah penempatan kode, maka Prisma highlighter tidak akan berhasil sempurna.

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}

Masih ditempat yang sama, cari kode </body> dan letakkan 2 kode berikut ini tepat diatasnya.

<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 dibawah ini. Pilih sesuai jenis kode yang ingin ditampilkan.

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript hljs"> Tempatkan kode disini... </code></pre>
<pre title="JQueryku" data-codetype ="JQueryku"><code class="JQueryku"> Tempatkan kode disini... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css hljs"> Tempatkan kode disini... </code></pre>
<pre><code class="hljs xml"> Tempatkan kode disini... </code></pre>

Preview-nya bisa kamu lihat di Postingan ini.

Selesai.

Related Posts