Cara Menciptakan Syntax Highlighter Full Color Di Blogger

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

Berbekal sedikit pengetahuan perihal Css, Html dan Javascript, aku mengintip kode yang website sebelah pakai. Dan kesannya dapat!!

Dan, berhubung aku orangnya baik hati, akan aku 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 arahan </head> kemudian letakkan arahan 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 arahan </body> dan letakkan 2 arahan 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, kau tinggal memakai arahan dibawah ini. Pilih sesuai jenis arahan yang ingin ditampilkan.

<pre title="Cara Membuat Syntax Highlighter Full Color di Blogger" data-codetype ="JavaScriptku"><code class="language-javascript hljs"> Tempatkan arahan disini... </code></pre> <pre title="Cara Membuat Syntax Highlighter Full Color di Blogger" data-codetype ="JQueryku"><code class="JQueryku"> Tempatkan arahan disini... </code></pre> <pre title="Cara Membuat Syntax Highlighter Full Color di Blogger" data-codetype ="CSSku"><code class="language-css hljs"> Tempatkan arahan disini... </code></pre> <pre><code class="hljs xml"> Tempatkan arahan disini... </code></pre> 

Preview-nya sanggup kau lihat di Postingan ini.

Selesai.

Berbagi :