Blogger SyntaxHighlighter menggunakan PRISM

By | March 8, 2016

Buat teman-teman blogger yang senang berbagi hal-hal mengenai programming atau coding pastinya sudah sering mendengar istilah syntax highlighter. Yaitu semacam aplikasi yang dapat menampilkan source code mirip dengan apa yang muncul pada IDE bahasa pemrograman yang kita gunakan.

Kemarin saya mencari-cari di google, Syntax Highlighter yang mana sih yang bagus. Kebanyakan teman-teman blogger memilih versinya Alex Gorbatchev, tetapi setelah saya cari-cari lagi saya menemukan PRISM syntaxhighlighter dari rekomendasi Kang Ismet
Menurut Kang Ismet PRISM lebih ringan saat di-load, tidak seperti versi Alex Gorbatchev yang loadingnya sangat berat. SyntaxHighlighter ini juga terdiri dari dua pilihan tema, ada yang Light dan Dark, silahkan dipilih sesuai selera. Pemasangannya juga simple tinggal tambahkan kode CSS dan javascriptnya di blog kalian.


Langkah 1. Tambahkan CSS

Silahkan Tambahkan salah satu kode CSS yang kalian pilih di bawah ini, letakkan di atas ]]></b:skin>

Light Theme

  /* Tema : LightSyntax oleh Kang Ismet
URL: http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html */
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
color:#83405A;
}
pre code .token.punctuation {
color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
color:#008200;
}
code .namespace {
opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
color:#881280;
}
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:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
color:#994500;
}
code .token.operator {
color:#878A85;
}
code .token.atrule,
code .token.attr-value {
color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
color:#227BC0;
}
code .token.keyword {
color:#881280;
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;
}



Dark Theme

   /*
Tema RDark oleh DTE:] 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;
}

Langkah 2. Tambahkan Javascript di atas </body>

 <script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script> 

Simpan Template

Cara Penggunaannya

Untuk penggunaannya dapat disesuaikan dengan pilihan bahasa yang ingin kita bagikan, apakah itu language-markup (HTML,XML,PHP), language-javascript (javascript), language-css (CSS).
Pilih menu HTML pada posting blog dan tambahkan kode yang dipilih sebagai berikut:
<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape`) 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>

Selamat mencoba ya! Semoga Bermanfaat!

Leave a Reply

Your email address will not be published. Required fields are marked *