Prism Syntax Highlighter di Blog

Cara Mudah Memasang Box Script (Prism Syntax Highlighter di Blog) -
LPrism Syntax Highlighter adalah berupa border teks kode (Pre Code) yang biasa diisi dengan kode script seperti HTML, CSS, JavaScript, JQuery dan sebagainya. Fitur ini memberikan kesan yang menarik karena di penuhi dengan boder yang berwarna, tidak seperti syntax boder yang lainnya, Prism Syntax Highlighter ini ringan dan cantik luar biasa untuk di terapkan dalam situs anda. Oke bagi anda yang penasaran dengan cara memasang Prism Syntax Highlighter ini di blog anda silahkan simak pemabahsan yang berikut ini.


Oke Langsung Saja Simak Dengan Baik

1.Login Ke Blogger Tema > Edit Html

2.Copas kode dibawah ini. Lalu, pastekan tepat diatas ]]></b:skin> atau </style> (gunakan ctrl+f untuk mempermudah pencarian).


 /* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    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: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

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: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers &gt; code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows &gt; span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows &gt; span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

4.Lalu anda masukan kembali kode di bawah ini tepat diatas 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(&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>

5.Terkahir anda "Simpan Template".

6. Jika script prism syntax sudah di terapkan, sekarang yang anda harus lakukan hanyalah tinggal memasangnya di artikel kalian dengan cara buka "Entri Baru" dan pilih menu "HTML", dan masukan script di bawah ini sesuai keinginan kalian.
<pre class="line-numbers language-markup" data-codetype="HTMLku" title="HTML"><code class=" language-markup"> ...Masukan Kode HTML Disini (masuk Compose dulu)... </code></pre>
<pre class="line-numbers language-css" data-codetype="CSSku" title="CSS"><code class=" language-css"> ...Masukan Kode CSS Disini... </code></pre>
<pre class="line-numbers language-javascript" data-codetype="JavaScriptku" title="JavaScript"><code class=" language-javascript"> ...Masukan Kode JavaScript Disini... </code></pre>
<pre class="line-numbers language-javascript" data-codetype="JQueryku" title="jQuery"><code class=" language-javascript"> ...Masukan Kode jQuery disini... </code></pre>

7. Jika sudah anda bisa pilih menu "Compose" untuk melihatnya, jika belum terlihat anda bisa langsung Pritinjau hasil script yang kalian pasang.

8. Selesai dan lihat hasilnya.