Cara Mudah Memasang Prism Syntax Highlighter Pre Code di Blog

      Hey sob? salam sejuta umat. Kali ini saya akan memberikan sebuah cara bagaimana caranya untuk memasang sebuah fitur Prism Syntax Highlighter yang sederhana dan menarik, sebelumnya mungkin ada yang asing dengan nama ini namun saya yakin anda tahu fitur ini dan pernah melihatnya. Fitur Prism Syntax Highlighter ini adalah sebuah border yang menarik dan bersih untuk dilihat, dan tampilan dari Prism Syntax Highlighter ini pun flat dan modern karena di sertai oleh JQuery yang menyebabkan border yang satu ini sangat menarik jika di masukan ke dalam blog anda, terutama bagi anda yang mempunyai blog yang bertemakan tutorial blog yang lebih sering memberikan pemasangan script pada blog lain.

      Prism 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.


Cara Menerapkan Prism Syntax Highlighter di Blog

1. Pertama buka Blog anda.

2. Lalu klik "Template" dan masuk ke "Edit HTML".

3. Jika sudah anda bisa masukan kode CSS dibawah ini tepat diatas kode ]]></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.

Oke mungkin itu saja yang bisa kita berikan mengenai artikel "Cara Mudah Memasang Prism Syntax Highlighter di Blog" ini, semoga dengan apa yang sudah kita berikan ini dapat bermanfaat bagi Kalian. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar. Terimakasih.

Haris Nur Hamid

Post a Comment

Posting Komentar