White PRISM SyntaxHighlighter untuk Blogger
30 April 2014
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