Mecha versi 2.6.3 sudah dirilis!

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

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.