Membuat Tampilan Tag pre Menarik Dengan Garis Nomor Otomatis

Admin    Juni 22, 2020    Script , Tutorial CSS , Tutorial HTML    Comment   

Tag <pre> atau singkatan dari "Preformatted Text" adalah sebuah tag di dalam HTML untuk menampilkan text agar bisa tampil dengan spasi dan karakter sesuai aslinya (text tanpa format).

Sesuai dengan namanya, tag ini digunakan untuk text yang belum diformat.Artinya,  jika text diinput ke dalam tag <pre>, maka HTML akan menampilkan text tersebut apa adanya. Untuk lebih jelasnya silahkan perhatikan contoh penggunaan tag pre berikut ini :

<pre><code>&lt;div class="example"&gt;
    &lt;span&gt;Lorem ipsum dolor sit amet...&lt;/span&gt;
        &lt;/div&gt;</code></pre>
    <pre><code>(function() {
        var s = document.createElement('script');
            s.id = "some-id";
            s.type = "text/javascript";
         document.body.appendChild(s);
})();</code></pre>

Nah, untuk membuat tampilan tag <pre> seperti contoh diatas. Silahkan tambahkan file CSS berikut pada template :

pre {
	background-color:#eee;
    overflow:auto;
    margin:0 0 1em;
    padding:0 .5em 1em;
    }
    
pre code,
    pre .line-number {
    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;
    }

Dan script berikut pada template (sebelum tag </body>) :

(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>';
        }
    }
})();

Selamat Mencoba...!!!