Friday, April 28, 2017

Cara Memasang Kode Syntax Highlighter Berwarna Di Blog

author photo
Cara Memasang Kode Syntax Highlighter Berwarna Di Blog
Pekanan.com- Cara Memasang Kode Syntax Highlighter Berwarna Di Blog | Pada kesempatan kali ini saya akan berbagi tutorial cara memanga syntax  Highlighter Berwarna  atau biasa disebut kotak untuk menaruh kode 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
Lalu baaimana cara memasang Kode Syntax Highlighter Berwarna Di Blog? Silahkan ikuti tutorial dibawah ini dengan teliti.

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.

Advertisement
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

6 comments

Nah ini nih highlighter yang ane cari, keren :-d

Balas

mantap sekali, bisa dipraktekin..

Balas

Nah ini nih lengkap banget penjelasan nya gan & cara nya juga g begitu rumit..

Balas

wih mantep gan, ane coba dulu dah

Balas

Selamat Datang di Blog Pekanan.com

Next article Next Post
Previous article Previous Post