Cara pemasangannya pun cukup mudah hanya memasang kode CSS dan JavaScript. Jika sobat tertarik dengan SyntaxHighlighter Prism silahkan ikuti tutorial dibawah ini.
1. Simpan kode CSS dibawah ini di atas kode ]]></b:skin>
2. Simpan JavaScript dibawah ini di atas kode </body>/* Tema pribadi => RDark Saya buat 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; }
<script type="text/javascript" src='http://dte-project.googlecode.com/svn/trunk/prism.js'></script>
Cara penggunaannya
Setiap tipe bahasa mempunyai kelas masing-masing
- HTML, XML, PHP ⇒ language-markup
- CSS ⇒ language-css
- JavaScript ⇒ language-javascript
Resource: http://www.dte.web.id/2012/09/syntax-highlighter-dengan-prism.html<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>