Cara Membuat PRISM SyntaxHighlighter di Blogger

Membuat PRISM SyntaxHighlighter di Blogger - Halo, apa kabar sobat blogger? pada kesempatan kali ini kembali saya ingin berbagi tips seputar dunia blogging. Menurut saya, sobat sudah tidak asing lagi dengan istilah Syntax Highlighter. Karna sebagian besar blog tutorial menggunakan syntax ini untuk menampilkan kode script yang akan dibagikan.

Kenapa harus membuat PRISM SyntaxHighlighter di Blogger?

Pada dasarnya, Syntax Highlighter ini dapat membuat kode script yang kia bagikan dipostingan menjadi berwarna-warni. Nah, oleh sebab itu script syntax ini banyak digunakan blog tutorial, karna script kode yang akan dibagikan dipostingan akan terlihat lebih menarik.

Untuk lebih jelasnya silahkan lihat demo dibawah ini:

Light Theme Dark Theme

Bagaimana, apakah sobat tertarik Membuat PRISM SyntaxHighlighter di Blogger? Jika iya, silahkan ikuti langkah pemasangannya dibawah ini. Untuk pemasangannya sendiri saya rasa cukup mudah sekali, sebab hanya menambahkan kode CSS dan Javascript.

#1. Menambahkan kode CSS PRISM SyntaxHighlighter

Disini, saya memiliki dua tampilan PRISM SyntaxHighlighter yang berbeda berdasarkan tema yaitu Light Theme dan Dark Theme. Untuk pemilihan, silahkan sesuaikan dengan kebutuhan dan tampilan blog sobat.

Silahkan salin salah satu theme css PRISM SyntaxHighlighter dibawah dan letakkan diatas ]]></b:skin> atau </style>

/* Tema : LightSyntax oleh Kang Ismet */ 
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;
} 

/*
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;
} 

#2. Menambahkan Javascript PRISM SyntaxHighlighter

Untuk kode javascript, silahkan salin kode dibawah ini dan letakkan diatas </body>

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

#Simpan template

#Cara Penggunaan PRISM SyntaxHighlighter

Setiap tipe bahasa mempunyai kelas masing-masing

• HTML, XML, PHP ⇒ language-markup
• CSS ⇒ language-css
• JavaScript ⇒ language-javascript

Detail Markup HTML bisa gunakan kode dibawah ini, sesuaikan dengan kode yang akan ditampilkan.

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

Semoga bermanfaat..

 Sumber: blog.kangismet.net