Cara Memasang Kode Syntax Highlighter Berwarna Di Blog
Syntax Highlighter tentunya sudah tidak asing lagi bagi sobat yang sudah sering bergelut dengan duni blogging, khususnya blog yang membahas tentang tutorial blogging, yang pasti blog dengan niche ini tidak akan lepas dari sebuah kode.
Agar tampilan kode yang sobat pasang di blog untuk suatu tutorial lebih terlihat keren dan cantik, sobat bisa menggunakan kode yang akan saya bagikan dibawah ini, kode ini sudah dilengkapi dengan doble click to select, jadi pengunjung sobat tidak perlu lagi susah-susah memblok kode yang sobat sediakan, cukup dua kali klik kode sudah terselesksi secara otomatis.
Selain itu Syntax Highlighter yang akan saya bagikan dihiasi dengan warna, jadi setiap class dan velue akan terliha berbeda sesuai dengan warnanya masing-masing.
Berikut adalah fitur yang ada di syntax hughtlighter untuk blogger:
- Highlight CSS language
- Highlight HTML5 language
- Highlight Javascript language
- Highlight jQuery language
- Highlights embedded languages
- Highlights inline code as well, not just code blocks
- Highlights nested languages
Cara Memasang Kode Syntax Highlighter Berwarna Di Blog
Pertama silahkan masuk ke Blogger Dashboard > Template > Edit HTML lalu kopi kode CSS dibawah ini sebelum <style> atau ]]></b:skin> untuk mempermudah mencarinya sobat bisa menggunakan quickseacrh dengan cara klik CTRL+F di keyboard sobat./* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;}
pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;line-height:20px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:16px;color:#aaa;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#aaa;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#bbb;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
code .token.operator {color:#1887dd;}
code .token.atrule,code .token.attr-value {color:#009999;}
pre code .token.atrule,pre code .token.attr-value {color:#1baeb0;}
code .token.keyword {color:#e13200;font-style:italic;}
code .token.comment {font-style:italic;}
code .token.regex {color:#ccc;}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::before {content:'Code';font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::after {font-size:11px;}
.comments pre code {color:#aaa;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;}
.line-numbers-rows > span {display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before {content:counter(linenumber);color:#aaa;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;}Setelah itu sobat cari kode </body> lalu letakan tiga kode dibawah ini tepat diatas kode tersebut
<script src='https://cdn.rawgit.com/pekanan/script/60f9e6e7/prisma.js' type='text/javascript'/><script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>Setelah itu lalu save template sobat.
Sampai disini sobat sudah berhasil memasang Kode Syntax Highlighter Berwarna Di Blog, dan sudah bisa sobat gunakan di blog sobat.
Namun masih ada satu step lagi, agar kode muncul di blog sobat, kode tersebut yang dipasang perlu dipanggil, dengan cara memasang kode HTML dibawah ini setiap sobat ingin memposting kode di blog sobat,
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... YOUR HTML CODE HERE ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... YOUR CSS CODE HERE ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... YOUR JAVASCRIPT CODE HERE ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... YOUR jQuery CODE HERE ... </code></pre>Sampai disini tutorial cara memasang kode syntax hightlighter di blog, semoga dapat membantu sobat semua.