Prism Syntax Highlighter Sederhana untuk Blogger

Prism Syntax Highlighter Sederhana untuk Blogger

Buat Anda yang sedang gundah gulana karena tidak menemukan Prism Syntax Highlighter yang cocok dengan blog Anda, kali ini saya akan membagikan prism syntax highlighter dengan tampilan yang elegan, sederhana, ringan dan yang pastinya akan menyembuhkan kegundahan Anda.

Mas Wahyu Prism Syntax Highlighter itu apa sih ?

Jadi gini loh, Prism Syntax Highlighter itu kotak script yang biasa digunakan blog tutorial untuk meletakkan atau menyematkan kode script agar terlihat lebih rapih. Berikut demo Prism Syntax Highlighter yang dapat Anda lihat pada link demo di bawah ini.

Cara Memasang Prism Syntax Highlighter di Blog

1. Buka Blogger > Template > Edit HTML > Kemudian salin dan letakkan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

/*
Tema pribadi => RDark
Saya buat berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/

pre {
padding:.5em 1em;
margin:.5em 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#1B2426;
}

code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:16px;
color:#B43D3D;
background-color:#eee;
border:1px solid #ddd;
padding:1px 2px;
}

pre code {
display:block;
background:none;
border:none;
color:#B9BDB6;
direction:ltr;
text-align:left;
word-spacing:normal;
padding:0 0;
}

code .token.punctuation {
color:#83405A;
}

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

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

code .namespace {
opacity:.8;
}

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

code .token.selector,
code .token.attr-name,
code .token.string {
color:#986A7C;
}

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

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

code .token.operator {
color:#878A85;
}

code .token.atrule,
code .token.attr-value {
color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
color:#48E638;
}

code .token.keyword {
color:#47A1CF;
font-style:italic;
}

code .token.comment {
font-style:italic;
}

code .token.regex {
color:#B43D3D;
}

code .token.important {
font-weight:bold;
}

code .token.entity {
cursor:help;
}

2. Setelah itu letakkan kode JavaScript dan Jquery (fungsi Jquery untuk mengaktifkan fitur double click to selection) di bawah ini tepat sebelum </body>

JavaScript

<script type="text/javascript" src='https://cdn.rawgit.com/Wahyututorial/project/master/trunk/prism.js'></script>

Jquery

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

3. Simpan Template

Cara Penggunaan

Saat Anda membuat post baru, salin dan letakkan kode pemanggil di bawah ini pada kolom postingan Tab HTML.

<pre><code class="language-markup"> ... kode HTML di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

Setelah itu kembali ke mode Compose lalu ganti kalimat kode blabla di sini dengan kode yang ingin Anda bagikan.

Sekian tutorial yang dapat saya bagikan. Semoga bermanfaat untuk Anda. Masih belum paham? komentar ya:)

Leave a Reply