Syntax Highlighter Dengan PRISM 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 sintaxhighlighter itu? Bahasa mudah nya yaitu membuat kode berwarna warni.
Nah, sekarang
Rinata akan coba membagikan
cara memasang syntax highlighter dengan prism untuk blogger.
Cara Memasang
Memasangnya sangat mudah, hanya membutuhkan dua langkah.
Langkah Pertama : masuk ke
Dashboard > Template > Edit HTML > Temukan kode ini:
]]></b:skin>
Letakkan kode ini di atasnya:
/* 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 : Masih di halaman yang sama, temukan kode ini:
</body>
Letakkan script ini di atasnya:
<script type="text/javascript" src='http://blog-rinata.googlecode.com/svn/trunk/prism.js'></script>
Klik Simpan Template.
Cara Pemakaian
Setiap tipe bahasa memiliki kelompoknya masing-masing
Untuk tipe bahasa:
- HTML, XML, PHP > language-markup
- CSS > language-css
- JavaScript > language-javascript
- Java > language-java
Contoh penulisannya 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>
<pre><code class="language-java"> ... kode Java di sini ... </code></pre>
Nah, itulah cara memasang Syntax Highlighter dengan PRISM Untuk Blogger. Jangan lupa baca tutorial lainnya. Jika ada kekurangan silahkan anda menambahkannya dalam kolom komentar, terima kasih.
Artikel keren lainnya:
Belum ada tanggapan untuk "Syntax Highlighter Dengan PRISM Untuk Blogger"
Posting Komentar
Terima kasih telah berkunjung di personal blog ini. Silahkan berkomentar dengan bijak.
** Centang tombol "Beri Tahu Saya" jika ingin mendapat notifikasi balasan