CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS
CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS – Cara memasang tag pre boleh dibilang hal yang masih awam di kalangan blogger. Pada umumnya mereka menggunakan tag blockquote karena lebih simpel dalam penggunaannya. Akan tetapi bagi sebagian blogger yang mengkhususkan pada tutorial yang kontennya berisi source kode alangkah baiknya untuk memasang tag pre ini agar tampilan postingan lebih cantik dan menarik.
Cara memasang tag pre dengan nomor otomatis?
<script type='text/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>';
}
}
})();
</script>
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;
}
3. Untuk menggunakan tag pre dengan nomor otomatis ini gunakan format html berikut pada form penulisan artikel
<pre><code> ... </code></pre>
Hasil dari javascript diatas bisa dilihat di gambar berikut ini
![]() |
tag pre with number |
Untuk langkah-langkah cara memasukan tag pre dalam postingan kalian bisa lihat dalam tutorial CARA MEMBUAT TAG PRE VANILA STYLE disitu disajikan lengkap mulai dari awal. Semoga artikel CARA MEMBUAT TAG PRE DENGAN NOMOR OTOMATIS ini bisa bermanfaat bagi para blogger semua. Untuk mengetahui lebih detail tentang isi dan fungsi javascript diatas bisa dilihat pada blog sumbernya Taufik Nurrohman