Cara Membuat Syntax Highlighter Di Blog | Bagi teman teman suka memberi tutorial di blog tentunya tidak asing lagi dengan yang namanya Syntax Highlighter, Sytax Highlighter ini digunakan untuk mempermudah para bloger dalam membaca tutorial yang menggunakan Script bahasa pemrogaman tertentu seperti Html, Css, JavaScript dll.
Baiklah langsung saja saya akan memberikan tutorial memasang Syntax Highlighter di blog teman-teman.
1. Login ke dasboard kemudian Pilih Template dan masuk ke edit html.
2. Salin dan letakkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>
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: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:#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:#f1c40f;
}
pre[data-codetype="JQueryku"]:before {
background-color:#00c0ef;
}3. Setelah itu salin dan letakkan kode berikut ini tepat sebelum kode </body>
<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("<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> 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> Sekian Tutorial kali ini Semoga Bermanfaat.
0 Comments