Cara Membuat SyntaxHighlighter Prism Di Blog

Cara Membuat SyntaxHighlighter Prism Di Blog - Mungkin menurut saya sobat sudah pernah mendengar istilah SyntaxHighlighter Prism atau mungkin sobat belum pernah mendengar istilah tersebut.  SyntaxHighlighter Prism Adalah kode warna-warni pada blockquote blog.

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>

/*Tema pribadi => RDarkSaya buat berdasarkan tema-tema SyntaxHighligter dari Alex GorbatchevURL: 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;}

2. Simpan JavaScript dibawah ini di atas kode </body>

<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

 Kode yang ingin diberi efek harus harus berada di dalam tag pre > code 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>

Resource: http://www.dte.web.id/2012/09/syntax-highlighter-dengan-prism.html