Syntax Highlighter dengan PRISM

Tabel Konten
  1. Cara Pemakaian 
Syntax Highlighter dengan PRISM

Meskipun di blog ini Saya menggunakan syntax highlighter dari Software Maniacs, tapi jika diminta untuk memilih dari segi kecepatannya, maka Saya akan menggunakan PRISM, sebuah syntax highlighter untuk HTML, CSS, Java dan JavaScript (bekerja juga untuk PHP dengan asumsi sebagai markup):

Lihat Demo

Proses instalasi hanya membutuhkan dua langkah. Pertama-tama masuklah ke halaman editor HTML Template Anda kemudian pilih Edit HTML dan klik Lanjutkan. Temukan kode ini:

]]></b:skin>

Salin kode CSS ini dan letakkan di atasnya:

/*
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;
}

Setelah itu temukan kode ini:

</body>

Letakkan skrip ini di atasnya:

<script "//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/prism.min.js"></script>

Klik Simpan Template.

Cara Pemakaian 

Setiap tipe bahasa memiliki kelasnya masing-masing:

  • HTML, XML, PHPlanguage-markup
  • CSSlanguage-css
  • JavaScriptlanguage-javascript
  • Javalanguage-java

Kode yang ingin diberi efek 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>

Tema-tema yang asli bisa Anda temukan di situs sumbernya, PRISM. Atau mungkin Anda mau membuatnya sendiri?

30 Komentar

  • Anonim

    jadi ada garis setiap katanya saat di block.
    waww notifnya kerenn, udah kayak facebook aja :-bd :-bd

    • Taufik Nurrohman

      Efek garis itu cuma pengaruh line-height. Tidak ada hubungannya sama sekali dengan ini :p

      • abang ichal

        mungkin contoh lain yg seperti macam menyusun susunan kode html... yg macam prisma begitu deh

  • Putra

    baru pertama kali denger CSS direction =D
    fungsinya kayak text-align kan mas?

    • Taufik Nurrohman

      Bukan juga sih, direction biasanya digunakan untuk tulisan Arab.

  • Unknown

    bisa dicoba niih :-bd
    kalo untuk menyeleksi keseluruhan script cukup double click kayak di blog ini, caranya gmn mas?

  • Anonim

    kok gak bisa ya mas sudah saya pasang jadi .dblclick() :'(

    • Taufik Nurrohman

      Kok punyaku bisa???

      • Anonim

        oalah pantesan gak mau ternyata ada yang kurang :D

  • Anonim

    Kalo Menerapkan Ini Ke Blockquote SEcara Otomatis Tanpa Mengunakan Pemanggil gimana mas..?

    ribet..!
    #
    ;)
    makasih mas ,
    need fast **P

  • Unknown

    kk mau nanya gi mana cara nya memasang "Syntax Highlighter" di fitur manipulasi komentar .....
    B)

    • Taufik Nurrohman

      Asalkan elemen manipulasi komentar sudah dimanipulasi menjadi tag <pre> dan <code> sebelum script Syntax Highlighter dieksekusi, pasti bisa diaktifkan code highlighter di area komentar. Cuma, kalau memakai PRISM tidak bisa karena penulisan kelasnya masih manual. Lebih baik pakai Syntax Highlighter dengan fitur language auto-detection seperti Highlight.js atau PrettyPrint.

  • Anonim

    ini yang saya cari,, ijin coba dulu

  • dhanyn10

    mas taufik, kalo jsnya saya pake dari softwaremaniacs dan cssnya dari PRISM tidak masalah kan?

    • Taufik Nurrohman

      Beda plugin beda markup HTML dan nama kelasnya. Tidak bisa sekedar salin dan tempel. Yang bisa diambil cuma kombinasi warnanya saja.

  • budkalon

    gak bisa dikasih <mark/> ya? -_-

  • BOTmaz

    berhasil, makasih kang taufik.. :D salam kenal

  • Admin

    mas kayanya googlecode error deh :p

  • Huda

    untuk penulisan supaya tidak merata kekanan tetapi kebawah gimana? :(

    • Taufik Nurrohman

      pre {
      padding:.5em 1em;
      margin:.5em 0;
      white-space:-moz-pre-wrap;
      white-space:pre-wrap;
      word-wrap:break-word;
      background-color:#1B2426;
      }
  • Asyaf Syaffar

    Java itu JQuery bukan kang ?
    maaf pemula soalnya udah search digoogle perbedaan antara Java dan Jquery ga ada
    oh yang ada malah javascript dengan Jquery

  • idyn1d

    mas, jika ingin membuat tag prism seperti notepad++ gitu bagaimana, jadi ada nomernya di samping gitu. khusus untuk bahasa pemrograman PASCAL, HTML, DELPHIE.

    • Taufik Nurrohman

      Pakai plugin line-numbers → http://prismjs.com/plugins/line-numbers/

  • BKE

    link js error mas mohon update lagi

    • Anonim

      udah ada daftar salinannya gan :)

Komentar telah ditutup.