30 April 2014

White PRISM SyntaxHighlighter untuk Blogger

White PRISM

White PRISM SyntaxHighlighter untuk Blogger - Hai sobat semua sekarang saya akan membagikan Tutorial yang berjudul ''PRISM SyntaxHighlighter'' apa itu PRISM SyntaxHighlighter, bahasa yang mudah dimengerti yaitu membuat kode yang di tampilkan menjadi lebih bagus.

Untuk Pemasangannya Cukup Dua Langkah saja, yaitu memasang kode CSS dan Javascript.
Silahkan Lihat Demonya Dibawah ini :


Langkah Pertama : Tambahkan CSS di bawah ini tepat di atas ]]><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;
} 

Langkah Kedua : Tambahkan Javascript di atas </body>

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

Cara Penggunaan :

Setiap tipe 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 Tutorial Ini bermanfaat bagi sahabat blogger semua...

 Source : http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html 
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic