Eksperimen Syntax Highlighter
HAAAAAHHHHHHHHH!!!! Mulai iseng lagi…
jQuery
// Pure jQuery Syntax Highlighter by Taufik Nurrohman
// Still an experimental :)
// https://plus.google.com/108949996304093815163/about
$(function() {
$('pre').each(function() {
var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)",
rep1 = new RegExp(list + " ", "ig"),
rep2 = new RegExp(list + "( ?)<span", "ig"),
$this = $(this);
$this.html($this.html()
.replace(/(<br>|\n)$/ig, "")
.replace(/(\t)/g, " ")
.replace(/"/ig, "\"")
.replace(/'|'/ig, "\'")
.replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>")
.replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>")
.replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>")
.replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>")
.replace(/(\d+(?!(.*<)))/g, "<span class='num'>$1</span>")
.replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
.replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>")
.replace(/<(.*?)>/g, "<span class='tag'><$1></span>")
.replace(/<!--([\s\S]*?)-->/gm, "<span class='comment'><!--$1--></span>")
.replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>")
.replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>")
.replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>")
.replace(rep1, "<span class='keyword'>$1</span> ")
.replace(rep2, "<span class='keyword'>$1</span>$2<span")
.replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span")
.replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3")
.replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1")
.replace(/!important/ig, "<mark class='important'>!important</mark>")
.replace(/<!(doctype)(.*)>/ig, "<span class='doctype'><!$1$2></span>")
.replace(/@<span class='attribute'>(import|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1")
.replace(/(@(import|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>")
.replace(/<span class='bracket'>\[<\/span>(.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>")
).find('.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contents().unwrap();
$this.append('<div class="the-num"></div>');
// Insert the line number
var num = $this.html().split(/\n|<br>/).length,
count = 0;
for (var i = 0; i < num; i++) {
count = count + 1;
$this.find('.the-num').append(count + '.<br/>');
}
$this.css('padding-left', $this.find('.the-num').outerWidth()+14);
});
});
CSS
pre {
background-color:white;
color:#069;
padding:0em 1em;
overflow:auto;
white-space:pre;
word-wrap:normal;
font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
position:relative;
margin:0 0 1em;
}
pre .the-num {
position:absolute;
top:0;
bottom:0;
left:0;
padding:0 1em;
color:#999;
background-color:#eee;
border-right:2px solid #ccc;
}
pre .bracket {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector {color:blue;}
pre .attribute,
pre .regexp {color:darkorange;}
pre .str {color:green;}
pre .tag .str {color:brown;}
pre .keyword {color:darkred;}
pre .comment {font-style:italic;color:#999;}
pre .num,
pre .hex {color:darkviolet;}
pre .name,
pre .important,
pre .array {color:red;}
pre .important {background-color:yellow;}
pre .doctype {color:magenta;}
48 Komentar
Putra
Wah keyen, tambah satu lagi pak, double clik selection :D #benar begitu :/
pokoknya yang di double clik jadi keseleksi semua :)
Taufik Nurrohman
@Alam Perwira Bisa, tapi markup HTML-nya harus dimodifikasi lagi (pakai snippet kode yang pernah Saya tuliskan di sini).
Mengingat nomor urut baris kode berada di dalam tag
<pre>
, jadi saat tag PRE diklik ganda, nomor indikator baris kode di dalamnya malah ikut terseleksi. Solusinya adalah dengan membungkus elemen baru di dalam tag<pre>
sebelum kita menyisipkan bar angka di bawahnya. Seperti ini:Sehingga markupnya akan berubah menjadi seperti ini:
Setelah itu cukup targetkan elemen
.selectable
sebagai daerah seleksi dan lupakan elemen.the-num
:Demo: http://jsfiddle.net/tovic/7rKM8/5/
Putra
@Taufik Nurrohman Alhamdulillah. Kesampaian juga make syntax higlighter :) thankyu pak Taufik. Baikk dehh <3
btw, gak nyangka jadi member aktif yeah.. =D
Unknown
Bagus nie Bang Taufiq tapi saya mau nanya kalau buat web gimana nie web saya www.spenzasumpiuh.com
Rosyd Aqbar
Untuk pemasanganya masih agak bingung nih bang Taufik, Bisa di jelasin gk ?
Syntax Highlighter cukup menarik bagi saya dan harus saya pelajari :D :-bd
Taufik Nurrohman
@Buka(n) Master ? Kalau bisa jangan memakai yang ini soalnya kurang akurat (cuma eksperimen). Saya membuat ini cuma untuk main-main saja :p
Lebih baik gunakan versi yang asli, yang lebih akurat. Cek di sini: Klik!
Rata-rata cara pemasangannya sama: CSS di dalam tag
<style>
, JavaScript di dalam tag<script>
:WTaufik Nurrohman
@Spenza-Sumpiuh Seperti yang Saya katakan ke mas Bukan Master di bawah, ada resikonya menggunakan ini karena Saya tidak mengetesnya lebih jauh dan ini hanya sebagai percobaan saja yang suatu saat mungkin akan Saya kembangkan lagi. Lebih baik gunakan versi yang sudah terkenal, bukan versi percobaan. Tapi kalau mau memasang highlighter buatan Saya bisa dengan cara meletakkan kode di dalam tag
<style>
untuk CSS kemudian letakkan di atas</head>
, dan JQuery bisa diletakkan di dalam tag<script>
kemudian letakkan di atas</body>
. Kode di atas setidaknya baru cocok untuk tipe bahasa yang sederhana seperti CSS, JavaScript dan HTML. Selain itu tampilannya biasanya akan tampak berantakan dari segi warna. Hanya warnanya saja yang berantakan, tapi tidak akan merusak komposisi halaman. Bisa dilihat contohnya di sini:Gambar di atas Saya ambil dari blognya mas Alam Perwira.
Kadang-kadang warnanya tidak konsisten :)
Beben Koben
Udah baca komentar balasan saya blon!!!
gak usah capek bikin syntax highlighter...Ni syntaclet.com
wekekekkk :p
Taufik Nurrohman
@Beben Koben Buat sendiri lebih seru WEEEKEKEKKK!!!! :p
WEEEEEEEEEEEEEEEEEEEEEEKKKKKKKKKKKKKKKKK!!!!!!
Rosyd Aqbar
Sebenarnya saya sudah pasang, tapi fungsinya gk optimal, kadang muncul kadang enggak
uki
HUhahahha.... akhirnya dapat juga,siap-siap pake di blog akh...
Tq :D
uki
@Uqhi•° Ou iya,jika di template udah ada prenya,apakah harus di hapus ?
uki
knp di saya munculnya ini ?
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Element type "span" must be followed by either attribute specifications, ">" or "/>"
Taufik Nurrohman
@Buka(n) Master ? Hmmm... Mungkin harus nunggu sampai loading halamannya selesai :\
Kalau yang dimaksud kode yang di atas, cukup ganti
$(window).load(function() {
dengan$(function() {
Taufik Nurrohman
@Uqhi•° Nggak usah. Itu sudah otomatis menyeleksi tag
<pre>
=DTaufik Nurrohman
@Uqhi•° Jangan lupa sisipkan komentar
//<![CDATA[
di dalam tag<script>
seperti ini supaya Blogger tidak menolak:Selengkapnya: Penolakan-Penolakan Blogger terhadap JavaScript dan URL
uki
@Taufik Nurrohman Oke di coba , kang taufik
Beben Koben
@Taufik Nurrohman yo wis wekkk wekkk deh!
uki
ouiya kang taufik,kan biasanya tuh ada yang masang anti klik kanan dan CTRL+U dan sebagainya,cara buat supaya hanya di bagian blockquote yang bisa di copy gitu gmn ?
Bakteri
Coba ngetest dulu ea kak Taufic ^_^ belajar dulu agh JQuery
Muhammad Irham
kalo yang dipakai kang taufik tutornya bijimane? ;)
Rosyd Aqbar
Om, Saya mengalami error nih, Saat di Double Click gk bisa ke Highlight :(
gimana nih :(
Bakteri
Bg Taufik Kalau yang ada toolbars nya itu gimana ea contohnya gini http://1.bp.blogspot.com/_7so4C0dWMLE/Sa7ofCq86DI/AAAAAAAAAFk/TE0y5fAJdcQ/s400/old.PNG
tolong donk ..! :P
Taufik Nurrohman
@Muhammad Irham http://softwaremaniacs.org/soft/highlight/en/
Taufik Nurrohman
@Buka(n) Master ? Mungkin itu pakai versi yang lama. Kalau versi yang baru bisa di dobel-klik. Coba cek situs http://tympanus.net/codrops
Dia juga make SyntaxHighlighter dari AlexGorbatchev.
Taufik Nurrohman
@edinofri Itu SyntaxHighlighter versi lama. Dulu dikasih toolbar soalnya kode yang sudah dikenai SyntaxHighlighter tidak bisa disalin (Baris-baris nomor ikut tersalin). Kalau versi yang sekarang sudah tidak ada toolbarnya.
Unknown
oia bang, pertanyaan saya hampir sama seperti @edinofri , cuman yang saya mo tanyain gimana caranya nerapin disetiap nomornya/garis baru warnanya berubah-ubah di tutor syntax versi abang tofik??, contoh gambar
Taufik Nurrohman
⇒ /2012/04/make-automatic-numbering-system-on-each.html
Taufik Nurrohman
@Uqhi•° Pakai saja
.hover()
Pertama-tama set tag
<body>
dengan atribut berupaoncontextmenu='return false;'
Ini adalah dasar untuk menonaktifkan klik kanan ⇒ baca di siniSetelah itu kita gunakan
.hover()
untuk melepas atributoncontextmenu
saat pointer memasuki area<blockquote>
, dan akan mengeset ulang atributoncontextmenu
saat pointer keluar dari<blockquote>
:Saat pointer berada di luar area blockquote, klik kanan tidak bisa dilakukan karena atribut
oncontextmenu='return false;'
melarang kita melakukan aksi klik kanan, sebaliknya saat pointer memasuki daerah blockquote, klik kanan bisa dilakukan karena atributoncontextmenu='return false;'
sudah terhapus saat pointer masuk.Unknown
makasih sebelumnya atas trik nya kang, trik diatas berhasil saya praktekan pada pointer pre dan code, nah yang ingin saya tanyakan, jika ingin menambahkan fungsion selain .hover gimana caranya kang ....? misal pada halaman comen tetap bisa di copy gitu ..?
Bakteri
Makasih ea Bg Taufik :-bd Banyak dapet pelajaran dari blog akang terutama dalam hal JQuery
uki
@Taufik NurrohmanKok saya masih tdk bisa ya ?
Taufik Nurrohman
@Uqhi•° Tetooooooottt!!!! Anda belum beruntung.
uki
@Taufik Nurrohman Auu...... :'(
oiyua,.... script di atas di taruh di atas
</head>
kan ?Putra
ada problem mas. Waktu ak doble clik, trus saya copy, pas dipaste hasilnya gak ada enternya, gak ada ganti baris :'(
Taufik Nurrohman
@Alam Perwira Saya coba yang tanpa dobel-klik jadi, tapi yang memakai dobel-klik tidak jadi. Saya coba ubah karakter
\n
menjadi<br>
dan karakter\s
menjadi
tetep nggak jadi. Mending jangan pakai dobel-klik, pakai cara biasa saja:Demo: http://jsfiddle.net/tovic/7rKM8/12/embedded/result,js,css,html/
Oya, kode di atas sudah pernah Saya perbaharui pada CSS dan sedikit pada JQuery.
Putra
@Alam Perwira saya lepas saja deh doblecliknya. trus kalau semisal thnum(penomoran)nya dihilangkan caranya gmn? :\
Taufik Nurrohman
@Alam Perwira hapus kode ini:
Demo: http://jsfiddle.net/tovic/7rKM8/13/
Anonim
wah ada profesor nih :D eksperimennya berhasil \o/
makasih kang...
Ressa
bagus nih , kode pemanggil untuk postingnya apa kang ?
Unknown
mantap nih..inovasi baru syntax..tapi buat yang malas kaya saya cuma pake blockquote
salam admin satriyoku
Teknomia
bagus bangett mas...
cara agar bisa menyorot sebagian script penting di dalam tag pre gimana mas?
Taufik Nurrohman
Eksperimen ini sudah tidak diperbaharui. Coba versi yang lebih stabil di sini → https://github.com/tovic/generic-syntax-highlighter
Untuk menandai kode yang penting bisa memakai elemen HTML
<mark>
.Mas Kolektor
gan, agar numbering mengikuti jumlah baris dari isi pre yang di text wrapping gimana ya gan ? krn sudah coba edit css "white space:pre-wrap + word-wrap:break-word" numberingnya tidak mau otomatis mengikuti jumlah baris, mohon bantuannya gan :D
Taufik Nurrohman
Iya nggak bisa karena di sini Saya pakai float. Bakalan beda ceritanya kalau tiap baris dipisahkan oleh elemen
<div>
.Mas Kolektor
sip gan, jadi makin ribet ya kalo gitu, btw #OOT ada artikel yang membahas double click select didalam element div class atau div id kah gan ? kalo ada boleh lihat artikelnya ?
Taufik Nurrohman
→ /2013/01/javascript-seleksi-teks-otomatis.html
Zona Kode Web
ada solusi buat max-height tapi background dari penomoran gak ngikut sampai scroll mentok kebawah min? backgroundnya kepotong