Apa itu Prism Syntax Highlighter? Prism Syntax Highlighter adalah text kode yang ditampilkan dalam berbagai warna, tujuannya adalah untuk mempermudah penggunanya di dalam menulis bahasa pemrograman atau bahasa markup termasuk source code
Kemarin lalu saya menggunakan Syntax Highlighter Alex Gorbatchev, namun karena Syntax Highlighter dari Alex Gorbatchev terlalu berat untuk dimuat maka pada akhirnya saya beralih ke Prism Syntax Highlighter dan ternyata hasilnya sangat memuaskan. Selain ringan, Prism Syntax Highlighter juga memiliki tampilan yang bersih dibandingkan dengan Syntax Highlighter dari Alex Gorbatchev. Tak sabar ingin mencobanya? baiklah langsung saja kita masuk ke langkah-langkah pemasangan Prism Syntax Highlighter di bawah ini :
1. Login ke Blogger terlebih dahulu, pilih Template dan masuk ke Edit HTML
2. Salin dan letakkan kode CSS berikut ini sebelum kode ]]>
Untuk mempermudah pencarian gunakan tombol kombinasi CTRL + F pada keyboard dan tulis kodenya di kolom pencarian lalu tekan Enter
/* CSS Prism Syntax Highlighter */
pre {
padding:35px 10px 0px;
margin:.5em 0;
white-space:pre;
word-wrap:break-word;
overflow:auto;
background-color:#222;
position:relative;
max-height:500px;
}
pre::before {
font-size:14px;
content:attr(title);
position:absolute;
top:0;
background-color:transparent;
padding:6px 10px 6px 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: 6px;
top: 6px;
color: #fff;
line-height: 20px;
transition: all 0.3s ease-in-out;
}
pre:hover::after {
opacity:0;
top:-8px;
visibility:visible;
}
code {
font-family:Verdana,Geneva,sans-serif;
line-height:16px;
color:#88a9ad;
background-color:transparent;
padding:1px 2px;
font-size:12px;
}
pre code {
display:block;
background:none;
border:none;
color:#94b7bb;
direction:ltr;
text-align:left;
word-spacing:normal;
padding:10px;
font-weight:none;
}
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:none;
}
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:#494158;
}
.comments pre::before {
content:'Code';
font-size:0px;
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:none;
}
.comments pre::after {
font-size:0px;
}
.comments pre code {
color:#94b7bb;
}
.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:1px;
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:#A3A49A;
display:block;
padding-right:0.8em;
text-align:right;
transition:350ms;
}
pre[data-codetype="CSSku"]:before {
background-color:#2c9bdc;
}
pre[data-codetype="HTMLku"]:before {
background-color:#f56954;
}
pre[data-codetype="JavaScriptku"]:before {
background-color:#ee9537;
}
pre[data-codetype="JQueryku"]:before {
background-color:#00c0ef;
}3. Setelah itu salin dan letakkan kode berikut ini tepat sebelum kode
<script src='https://librasbr.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("");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>4. Simpan Template
Untuk memanggil Syntax Highlighter di dalam Posting gunakan kode berikut:
<pre class="line-numbers language-markup" data-codetype="HTMLku" title="HTML"><code class=" language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre class="line-numbers language-css" data-codetype="CSSku" title="CSS"><code class=" language-css"> ... kode CSS di sini ... </code></pre>
<pre class="line-numbers language-javascript" data-codetype="JavaScriptku" title="JavaScript"><code class=" language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre class="line-numbers language-javascript" data-codetype="JQueryku" title="jQuery"><code class=" language-javascript"> ... kode jQuery di sini ... </code></pre>Pastikan dalam penulisan kode pemanggil Anda harus berada di HTML editor bukan Compose.
