Syntax Highlighter dengan PRISM
Tabel Konten
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):
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, PHP ⇒
language-markup
- CSS ⇒
language-css
- JavaScript ⇒
language-javascript
- Java ⇒
language-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 :pabang 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?
Taufik Nurrohman
Baca di sini: Auto Highlight Teks di dalam Tag PRE
Kalau ingin mengubah event seleksi menjadi dobel klik, ganti event
.click()
dengan.dblclick()
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.Kang Ismet
bagaimana cara mengaktifkannya? saya sudah coba di http://ujicoba05.blogspot.com/2013/05/cobaan.html belum bisa kang...
apa salah pada scriptnya? atau harus ditambah CSS?
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
Admin
PRISM ini gak bisa dikasi < mark > ya ?
Taufik Nurrohman
Huda
untuk penulisan supaya tidak merata kekanan tetapi kebawah gimana? :(
Taufik Nurrohman
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
Taufik Nurrohman
Java itu bukan JavaScript. JQuery adalah bentuk implementasi JavaScript dalam lingkup yang besar. Kesimpulan: JQuery adalah JavaScript.
Posting lama → /2011/11/perkenalan-jquery.html
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 :)