Cara membuat PRISM SyntaxHighlighter untuk Blog

PRISM SyntaxHighlighter untuk Blogger - Bagi sahabat yang sering berbagi tutorial, saya kira sudah tidak asing lagi dengan istilah Syntax Highlighter. Tapi mungkin juga masih ada yang bertanya, apa sih sintaxhighlighter itu? Bahasa mudah nya membuat kode berwarna warni 

Pada awal ngeblog, saya menggunakan SyntaxHighlighter dari Alex Gorbatchev, akan tetapi saya rasa loadingnya sangat berat. Kemudian saya berpindah ke PRISM syntaxhighlighter. Saya rasa, PRISM ini yang paling ringan diload, walaupun saya sekarang menggunakan highlight.js.

Untuk pemasangannya, hanya memerlukan dua langkah mudah, yaitu memasang kode CSS dan JavaScript. Sebelum memasang kode CSS, silahkan pilih tema Dark atau Light.

• Demo Light Theme
 
• Demo Dark Theme

Langkah 1: Tambahkan CSS.

Silahkan pilih sesuai kebutuhan di blog sobat, versi Light atau Dark. Silahkan simpan salah satu kode CSS di bawah ini 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 Penggunaan

Setiap tipe bahasa mempunyai kelas masing-masing

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

Detail penulisan seperti ini:

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

Terima Kasih telah membaca artikel tentang Cara membuat PRISM SyntaxHighlighter untuk Blog . Silahkan baca artikel lainnya di daftar isi.

• Tweet
• Share
• Share
• Share
• Share

Unknown

Judul : Cara membuat PRISM SyntaxHighlighter untuk Blog .
Ditulis oleh : Unknown .
Pada hari : Saturday 16 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+

×

Related Post