Memasang Prism Syntax Highlighter di Blogger Ala Ge School - Tentunya para blogger pasti tidak asing dengan Syntax Highlighter, yang sering muncul di berbagai situs yang bertema blogger.
Syntax Highlighter biasanya digunakan untuk menampilkan kode HTML / Javascript, CSS, dll. Banyak blog yang menggunakan fitur ini terutama Arlina Design, Kang Ismet, Kompi Ajaib, Kang Mousir, dll.
Nah, kali ini saya akan membagikan bagaimana Memasang Prism Syntax Highlighter di Blogger Ala Ge School.
1. Letakan kode CSS dibawah ini diatas kode
/* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;word-break: normal !important; word-wrap: normal !important; white-space: pre !important;overflow:auto;background-color:#222;position:relative;max-height:500px;border-radius:3px;}
pre::before {font-size:14px;content:attr(title);position:absolute;top:0;background-color:#444;padding:7px 10px;left:0;right:0;color:#fff;display:block;margin:0 0 15px 0;font-weight:700;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:#5a9ad2;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;padding-top:36px;counter-reset:linenumber;}
pre.line-numbers > code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;pointer-events:none;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 {pointer-events:none;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:#f0b26f;}
pre[data-codetype="JQueryku"]:before{background-color:#c2ac79;}2. Masukan kode yang ada dibawah ini tepat sebelum
<script src='https://arlina-design.googlecode.com/svn/prism.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("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);
}
</script>3. Simpan Template
<pre title="CSS" data-codetype ="CSSku"><code class="language-css">...........</code></pre>
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">...........</code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">...........</code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">...........</code></pre>Untuk Menggunakan Prism Syntax Highlighter sobat harus menaruh kode seperti ini terlebih dahulu. Masukan kode tepat pada " ... " ( titik -titik )
Artikel ini berasal dari : http://ge-school.blogspot.co.id/2016/01/memasang.prism.syntax.highlighter.di.blogger.html
Tidak ada komentar
Suwandy Berpesan :
1. Berkomentarlah dengan baik dan sopan
2. Saya akan selalu melihat setiap komentar, tetapi tidak semuanya saya jawab
3. Terimah kasih -_-