Membuat Sistem Penomoran Otomatis pada Setiap Baris Kode di dalam Tag PRE
Cara termudah untuk menciptakan baris-baris angka di dalam tag <pre>
adalah dengan menghitung jumlah karakter ganti baris di dalamnya, kemudian kita gunakan hasilnya untuk menciptakan deret angka yang nantinya akan mengalir secara otomatis.
Kita mulai dengan markup HTML seperti ini sebagai gambaran awal:
<pre><code>Baris teks 1
Baris teks 2
Baris teks 3</code></pre>
Pertama-tama kita harus menyeleksi semua elemen <pre>
:
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
// Lakukan sesuatu di sini melalui objek pre[i] ...
}
Setelah itu buat kontainer baris-baris angka dengan elemen <span>
:
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
// Sisipkan kontainer angka-angka
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
}
Markup HTML saat ini seharusnya sudah menjadi seperti ini:
<pre><span class="line-number"></span><code>Baris teks 1
Baris teks 2
Baris teks 3</code><span class="cl"></span></pre>
Hitung jumlah karakter ganti baris (\n
) di dalam masing-masing elemen <pre>
. Buat sebuah loop dengan batasan akhir sebanyak/sebesar jumlah karakter ganti baris yang ditemukan untuk membatasi jumlah angka-angka yang masuk ke dalam kontainer angka secara otomatis:
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
// Sisipkan kontainer angka
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
// Hitung jumlah karakter `\n` di dalam tag <pre>
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
// Menangkap elemen <span> pertama / elemen `.line-number`
var line_num = pre[i].getElementsByTagName('span')[0];
// Masukkan angka-angka ke dalam kontainer angka melalui elemen <span> baru
line_num.innerHTML += '<span>' + (j+1) + '</span>';
}
}
Sekarang markup HTML sudah menjadi seperti ini:
<pre><span class="line-number"><span>1</span><span>2</span><span>3</span></span><code>Baris teks 1
Baris teks 2
Baris teks 3</code><span class="cl"></span></pre>
Sisanya tinggal memposisikan kontainer angka ke bagian samping dengan CSS agar letaknya menjadi berada di sebelah kiri kode-kode yang kita tuliskan di dalam tag <pre>
:
pre {
background-color:#eee;
overflow:auto;
margin:0 0 1em;
padding:.5em 1em;
}
pre code,
pre .line-number {
/* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
font:normal normal 12px/14px "Courier New",Courier,Monospace;
color:black;
display:block;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
border-right:1px solid;
text-align:right;
}
pre .line-number span {
display:block;
padding:0 .5em 0 1em;
}
pre .cl {
display:block;
clear:both;
}
Hasil Seluruh Pekerjaan + Dekorasi
HTML
<pre><code> ... </code></pre>
JavaScript
(function() {
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j+1) + '</span>';
}
}
})();
CSS
pre {
background-color:white;
padding:0 1em;
white-space:pre;
word-wrap:normal;
overflow:auto;
}
pre code,
pre .line-number {
display:block;
font:normal normal 13px/24px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
color:#006699;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
color:#aaa;
background-color:#f5f5f5;
border-right:3px solid #6CE26C;
text-align:right;
min-width:2.5em;
}
pre .line-number span {
display:block;
padding:0 .5em 0 1em;
}
pre .line-number span:nth-child(even) {background-color:#eee}
pre .cl {
display:block;
clear:both;
}
Labels: JavaScript, Lanjutan, Regex
25 Comments:
Ini master tovik teh orang???
Kok rajin banget yah :D
Gile gile...gue mah ngerti penjelasan kata2nya tuh, cuman sudah masuk ke script jd puyeung :p
Sapa tuh yg mosting piano pakek CSS doang di cssdeck???
Kabuuurrr...
Keren abis. aku mau pakai tapi JS di blog udah lumayan hehee
@system of blog oh iya yang pembaruannya itu keren tapi bisa gak kita nulisnya cukup dengan <pre class="numbered">KODE KODE</pre> jadi gak terlalu ribet :D
@system of blog Itu sudah prosedur Highlight.js ⇒ HIghlight.js Test
Kalau mau memakai versi yang hanya menggunakan tag <pre> bisa mencoba versi yang lain.
@Taufik Nurrohman oh ok deh :)
Menurut Saya Kalo Pake Nomor itu waktu copy kodenya , nomornya ikut ter-copy, jadi terpaksa hapus manual !
#cuma-opini :-bd :Q
@Syndicate OS Kalau mau membaca, di atas sudah ada solusinya kok :)
@Taufik Nurrohman ketahuan kalo cuma liat judulnya aja :S
Minta ijin dulu ...mau tak pasang di blog saya
mass kalo pake addclass jquery biar otomatis pre ditambah class line-number bisa gak,biar gak ribet
masang nya gimana kk ~x(
setelah saya pasang scriptnya, pada bagian for (var i = 0; i < pl; i++) { keluar pernyataan The content of elements must consist of well-formed character data or markup, solusinya mas??
⇒ /2012/01/penolakan-blogger-terhadap-javascript.html
This comment has been removed by the author.
sebelumnya sudah saya pasang // ataupun menjadikannya file.JS mas, tp tag pre code di postingan tidak bekerja
kang, gimana caranya sewaktu di klik ganda bagian elemen nomer nya tidak ikut tercopy, sanya menggunakan fungsi ini <script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
⇒ /2013/03/simple-javascript-dialog-box-plugin.html?showComment=1369497043381#c3845141171031642426
tutor ini yg saya cari selama ini, tapi cara masangnya gmna?.
plisss... butuh banget
mas supaya format penulisannya tidak harus seperti ini gimana mas?<pre><code>Baris teks 1
Baris teks 2
Baris teks 3</code></pre> misalnya bisa serti ini<pre><code>Baris teks 1
Baris teks 2
Baris teks 3
</code></pre>
<pre><code>
Baris teks 1
Baris teks 2
Baris teks 3
</code></pre> intinya misal pada baris pertama atau terakhir itu kosong tidak muncul line number. tidak masalah jika baris kosong itu ditengah.
→ http://jsfiddle.net/tovic/AbpRD/339
gak berhasil diterapin di Blogger Javascriptnya...
atau sy yg gk tau caranya...
sy taro javascript di atas /head
<script type='text/javascript'>
//<![CDATA[
disini javascriptnya
//]]>
</script>
Coba taruh sebelum </body>.
Terkait: /2013/08/memahami-domcontentloaded.html
kode javascript error pada bagian
for (var i = 0; i < pl; i++) {
atau pada tanda <
mohon solusinya
Coba ganti:
var pre = document.getElementsByTagName('pre'),
pl = pre.length;
menjadi:
var pre = document.getElementsByTagName('pre');
if (!pre.length) return;
var pl = pre.length;
terima kasih, sudah dicoba dan work,
Post a Comment
<< Home