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):
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?
Labels: Blogger, Dasar, HTML, JavaScript, Regex
30 Comments:
jadi ada garis setiap katanya saat di block.
waww notifnya kerenn, udah kayak facebook aja :-bd :-bd
Efek garis itu cuma pengaruh line-height. Tidak ada hubungannya sama sekali dengan ini :p
mungkin contoh lain yg seperti macam menyusun susunan kode html... yg macam prisma begitu deh
baru pertama kali denger CSS direction =D
fungsinya kayak text-align kan mas?
Bukan juga sih, direction biasanya digunakan untuk tulisan Arab.
bisa dicoba niih :-bd
kalo untuk menyeleksi keseluruhan script cukup double click kayak di blog ini, caranya gmn mas?
Baca di sini: Auto Highlight Teks di dalam Tag PRE
Kalau ingin mengubah event seleksi menjadi dobel klik, ganti event .click() dengan .dblclick()
kok gak bisa ya mas sudah saya pasang jadi .dblclick() :'(
Kok punyaku bisa???
oalah pantesan gak mau ternyata ada yang kurang :D
Kalo Menerapkan Ini Ke Blockquote SEcara Otomatis Tanpa Mengunakan Pemanggil gimana mas..?
ribet..!
#
;)
makasih mas ,
need fast **P
kk mau nanya gi mana cara nya memasang "Syntax Highlighter" di fitur manipulasi komentar .....
B)
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.
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?
ini yang saya cari,, ijin coba dulu
mas taufik, kalo jsnya saya pake dari softwaremaniacs dan cssnya dari PRISM tidak masalah kan?
Beda plugin beda markup HTML dan nama kelasnya. Tidak bisa sekedar salin dan tempel. Yang bisa diambil cuma kombinasi warnanya saja.
gak bisa dikasih <mark/> ya? -_-
berhasil, makasih kang taufik.. :D salam kenal
mas kayanya googlecode error deh :p
PRISM ini gak bisa dikasi < mark > ya ?
Any pre-existing HTML in the code will be stripped off — Prism – Limitations
untuk penulisan supaya tidak merata kekanan tetapi kebawah gimana? :(
pre {
padding:.5em 1em;
margin:.5em 0;
white-space:-moz-pre-wrap;
white-space:pre-wrap;
word-wrap:break-word;
background-color:#1B2426;
}
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
Java itu bukan JavaScript. JQuery adalah bentuk implementasi JavaScript dalam lingkup yang besar. Kesimpulan: JQuery adalah JavaScript.
Posting lama → /2011/11/perkenalan-jquery.html
mas, jika ingin membuat tag prism seperti notepad++ gitu bagaimana, jadi ada nomernya di samping gitu. khusus untuk bahasa pemrograman PASCAL, HTML, DELPHIE.
Pakai plugin line-numbers → http://prismjs.com/plugins/line-numbers/
link js error mas mohon update lagi
udah ada daftar salinannya gan :)
Post a Comment
<< Home