Memasang Syntax Code Highligter di Blog

Memasang Syntax Code Highligter di Blog - Hari ini saya akan mengshare tutorial tentang bagaimana memasang Syntax Code Higlighter diblog. Bagi para blogger yang konten atau artikelnya seputar blogging mulai tips, trik maupun widget pasti sudah familiar dengan istilah syntax highligter.

Dengan memasang penempatan kode kusus maka tampilan akan lebih baik dari pada tidak memakainya.

Tapi jika ingin dipasang adapun kelemahannya yaitu mungkin akan menambah waktu loadingnya. tapi perangaruhnya tidak banyak hanya sedikit saja.

Jika anda ingin memasang maka bacalah sampai akhir artikel tetapi jika tidak silahkan tinggalkan artikel yang tidak bermanfaat ini.

Kegunaan syntax highlighter

Syntax Highligter pada blogger digunakan untuk meletakkan kode didalam postingan atau artikel blog. 

Fitur yang didukung oleh syntax highlighter pada blogger antara lain

1 Kode Bahasa CSS

2. Kode Bahasa HTML 5

3. Kode Bahasa Javascript

4. Kode Bahasa Jquery

5. Dan lain sebagainya

Dengan menggunakan dan memasang syntax higlighter pada blog akan membuat tampilan artikel blog anda lebih menarik dilihat dan mudah dibaca tertutama kode-kodenya.

Jika blog anda membahasa tentang seputar blogging mulai dari tutorial, tips dan trik blogging pasti salah satu artikel membutuhkan peletakan kode didalam konten blog itu.

Banyak tutorial yang menjelaskan banyak tentang cara menggunakan highlighter tak terkecuali pada artikel yang anda baca sekarang ini.

Sebagai contohnya adalah dalam tutorial halaman ini, itupun kalau belum diganti ya guys. he..he..

Sebelum mengikuti langkah-langkah dibawah ini diharapkan untuk membackup template anda karena tidak semua template berjalan semestinya atau hasil tidak sesuai harapan. Maka dari itu sebaiknya anda backup dulu template anda sebelum mempraktekkannya. Atau pakailah template lain untuk ujicobanya.

Dan Jika anda tertarik dengan syntax highlighter,

Ikut langkah demi langkah pada tutorial kali ini:

1. Pertama seperti biasa anda pergi ke Blogger Dashboard > Template > Edit HTML dan copy kode CSS ini dan letakkan diatas </style>

 /* 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;} 

2. Langkah kedua copy ketiga kode dibawah ini letakkan sebelum kode </body>

<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/pismaa.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> 

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

3. Setelah kedua cara diatas anda lakukan kemudian tekan tombol Save Template atau Simpan Template.

4. Dan untuk menggunakannya didalam postingan blog gunakan kode dibawah ini pada waktu menulis artikel. Gunakan pada mode HTML untuk meletakkan kode dibawah ini

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

Demikian tutorial singkat tentang memasang kode dengan syntax highlighter pada postingan blog. Semoga bermanfaat.

Silahkan berkomentar dibawah kalau anda mengalami kesulitan dalam pemasangan kode diatas. Maka secepat dan semampunya untuk saya jawab.

Jika artikel diatas membantu dan menarik bagi anda silahkan share pada teman-teman anda.