Cara Membuat Prism Syntax Highlighter

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Prism Syntax Highlighter

Mode HTML

  Halo sobat Blitarian4rt, ketemu lagi nih. Setelah kemaren mengungkap Rahasia Membuat Pengunjung Betah, sekarang saya memposting tentang Cara Membuat Prism Syntax Highlighter. Ini sangat cocok untuk para Bloggger yang suka memposting artikel tentang Widget atau Meta Tag dkk., penggunaannya cukup simpel dan mudah dipahami.

  Tapi, syntax highlighter saya kali ini berbeda dengan Syntax Highlighter yang biasanya, biasanya, syntax highlighter yang digunakan oleh para Blogger lain tidak bisa untuk membeda-bedakan mana yang harus dihighlight dan mana yang tidak, karena penulisan Script, CSS, Java, PHP dll, berbeda, makanya harus Highlight tidak selalu sama pada Script, CSS, Java, PHP dll.  

  Penulisan Prism Syntax Highlighter ini harus menggunakan Markup berbeda pada setiap Script, agar highlight yang ditampilkan berbeda dengan Script, CSS, Java, PHP dll. Sekarang waktunya untuk membuat !

• 1. Login ke Blogger
• 2. Pilih Menu Template
• 3. Edit HTML
• 4. Cari kode ]]></b:skin>, salin kode ini dan letakkan diatasnya

/*
Tema RDark by Blitarian4rt saya dapat 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;
}

• 5.  Lalu cari Kode </body>, letakkan Script ini tepat diatasnya

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

• 6. Simpan Template

  Penggunaan ini tidak berdasarkan <blockquote>, tetapi menggunakan bahasa sesuai kelasnya,

Bahasa-bahasa Kode

HTML, XML, PHP -> language-markup

CSS                          -> language-css

Javascript                -> language-javascript

Java                         -> language-java

Cara Penggunaan

Sebelum anda memposting, ketika akan menuliskan kode, pilih mode html

<pre><code class="language-markup">....HTML (yang sudah diparse) anda disini.....</code></pre>



<pre><code class="language-css">.....CSS anda disini.....</code></pre>



<pre><code class="language-javascript">.....Javascript (yang sudah diparse) anda disini.....</code></pre>



<pre><code class="language-java">.....Java (yang sudah diparse) anda disini.....</code></pre>

 Jika anda bingung untuk memparse, saya punya toolnya di Menu Web Tools.

  Untuk menghargai pemiliknya, situs resminya di PRISMJs, lebih baik lagi jika anda bisa memodifikasi sendiri ! Terima Kasih, Salam Blogger !

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Judul :Cara Membuat Prism Syntax Highlighter
Dipublikasikan oleh:Unknown
Dipublikasian pada :2013-06-06T16:35:00+07:00
Rating : 4.9
Direview oleh : 3765 Orang
Terima Kasih sudah mau membaca artikel saya yang berjudul Cara Membuat Prism Syntax Highlighter. Copy Paste tidak dilarang kok ! Asal mencantumkan link sumbernya ^_^, sudah 3 Blog saya laporkan dan terhapus lho gara-gara copy paste lho, jadi mohon hati-hati ya.....

Suka Dengan Artikel ini ? Klik tombol dibawah ini, terutama yang Plus One ya !