bangameck BLOG! - oke guys, kali ini saya akan memberi tutorial tentang Bagaimana Memasang Syntax Highlighter di Blog. hmm ada yang tau gak apa itu Syntax Highlighter (Penyorot Syntax) ?, Syntax adalah fitur editor teks yang di gunakan dalam bahasa pemograman ataupun scripting seperti : HTML, Java, PHP, dll.
jadi, Syntax Higlighter ini merupakan salah satu metode penulisan khusus untuk code - code pemrograman tersebut yang menampilkan fitur dalam berbagai warna sesuai dengan kategori bahasa pemograman.
Cara Memasang Syntax Higlighter di Blog adalah sebagai berikut :
- Pertama kalian harus login terlebih dahlu di blog kalian masing - masing (Login Blogger), Kalau Blom punya silahkan Daftar Blogger terlebih dahulu.
- Setelah Login, Pilih Template > Edit HTML.
- Cari Code ]]></b:skin> agar lebih mudah gunakan CTRL + F untuk mencari Code, lalu letakkan Code CSS di bawah ini di atas ]]></b:skin> tersebut :
/* CSS Syntax Highlighter [bangameck BLOG!] */ pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#222;position:relative;max-height:500px;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:#fff;display:block;margin:0 0 15px 0;font-weight:400;box-shadow:0 1px 3px rgba(0,0,0,0.1);} pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#fff;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:#88a9ad;background-color:transparent; padding:1px 2px;font-size:12px;} pre code {display:block;background:none;border:none;color:#c2bfd2;direction:ltr; text-align:left;word-spacing:normal;padding:10px;font-weight:bold;} code .token.punctuation {color:#ba3a3e;} pre code .token.punctuation {color:#777;} code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#666;} 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:#222;} .comments pre::before {content:'Code';font-size:12px;position:relative;top:0; background-color:#0fc66f;padding:1px 6px;left:0;right:0;color:#fff;text-transform:uppercase; display:inline-block;margin:0 0 10px 0;font-weight:400;border-radius:3px;border:none;} .comments pre::after {font-size:11px;} .comments pre code {color:#c2bfd2;} .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:#2a2a2a;border-right:1px solid #3a3a3a;} .line-numbers-rows > span {display:block;counter-increment:linenumber;} .line-numbers-rows > span:before {content:counter(linenumber);color:#666;display:block; padding-right:0.8em;text-align:right;transition:350ms;} pre[data-codetype="CSSku"]:before{background-color:#0183c5;} pre[data-codetype="HTMLku"]:before{background-color:#ee7147;} pre[data-codetype="JavaScriptku"]:before{background-color:#c2a3d0;} pre[data-codetype="JQueryku"]:before{background-color:#c2ac79;} - Lalu Letakkan lagi Code jQuery berikut di atas </body>
- Setelah itu klik Simpan Template.
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
//Pre Line Number
$('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("");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)})
Caranya yaitu masukkan code di bawah ini pada artikel sobat sekalian. ingat!! masukkan code dalam mode HTML bukan dalam mode Compose
<pre data-codetype="CSSku" title="Tutorial Syntax Highlighter [bangameck BLOG!]"><code class="language-bablog!"> // Letakkan Postingan Code Sobat disini... </code> </pre>
