Membuat kode otomatis dengan javascript

Question

Membuat penomoran baris kode secara otomatis akan membuat tampilan blog Anda semakin indah dan terlihat lebih professional. Cara ini dapat dilakukan sebagai alternatif jika Anda tidak menggunakan syntax highlighter atau penyorot sintak lainnya. Atau Anda lebih menginginkan tampilan blog Anda lebih cantik namun tetap menjaga performa blog.

Cara Buat Penomoran Baris Kode Otomatis dgn CSS & Javascript

Untuk membuat penomoran otomatis kode pada setiap baris ini dapat dilakukan dengan sederhana. Pertama, Anda cukup menambahkan CSS berikut pada file CSS tema Anda:

pre.blockcode {
	overflow-x:auto;
}
pre.blockcode code {
	display:block;
}
pre.blockcode code span.line::before {
	content:counter(code-line);
	display:inline-block;
	color: #777;
	text-align:right;
	width:23px;
	padding-right:7px;
	border-right:3px solid #6ce26c;
	margin-right:12px;
}
pre.blockcode code span.line {
	counter-increment:code-line;
	display:inline-block;
	width:100%;
	border-top:1px solid lightblue;
	border-bottom:1px solid lightblue;
	margin-top:-1px;
}

Kedua, tambahkan kode javascript di bawah ini di mana saja sebelum kode tag penutup </body>. Bagi Anda pengguna blogger maupun pengguna wordpress saya sarankan menyimpan kode ini hanya pada single post saja. Untuk blogger perhatikan kode ini <b:if cond=’data:blog.pageType == "item"’>, sisipkan setelahnya dan dan jangan lupa tambahkan tag penutupnya (</b:if>). Sementara untuk wordpress cukup simpan javascript ini di mana saja pada file single.php. Berikut kodenya:

<script type="text/javascript">
var pres = document.getElementsByClassName('blockcode'), pre, code, lines, pl, cl;
	for (pl = pres.length, p = 0; p < pl; p++) {
		pre  = pres[p];
		code = pre.children[0]; 
		code.innerHTML = code.innerHTML.split("\n").map
		(function(line) {return '<span class="line">' + line + '</span>';
        }).join("\n");
		lines = code.getElementsByClassName('line');
	for (cl = lines.length, l = 0; l < cl; l++) {
		lines[l].style.width = pre.scrollWidth + 'px';
		}
}
</script>

Terakhir, agar penomoran baris pada kode bisa diimplementasikan, Anda perlu memanggil class “blockcode” yang terdapat dalam script dan CSS pada blok kode yang ingin diberi penomoran.Caranya seperti ini:

<pre class="blockcode"><code>
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Kode Penomoran Baris Otomatis&lt;/title&gt;
    &lt;link rel="stylesheet" href="http://mysite.com/style.css" type="text/css" media="screen" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrap"&gt;
... dan seterusnya ...
</code></pre>

Lihat kode pembuka dan kode penutup pada baris 1 dan baris 11. Pastikan untuk selalu menambahkan kode tersebut yang terdiri dari <pre class=”blockcode”><code> (pembuka) dan </code></pre> (penutup) pada setiap kode yang ingin diberi penomoran.
Catatan: ketika memblok kode mungkin penomoran atau angka akan terbawa, tapi tenang saja hasil copy pada clipboard tidak demikian. Kode yang dicopy tidak akan menghiraukan angka sehingga hasil salinan adalah murni kode saja tanpa nomer. Cara ini saya temukan dan adaptasi dari sini.

Membuat Baris Belang atau Zebra Lines/ Stripes

Sampai tahap di atas sebenarnya sudah selesai, penomoran pada kode akan secara otomatis ditambahkan oleh script. Hasil akhir dan sebagai contoh dari tutorial Penomoran Baris Kode Otomatis dengan CSS dan Javascript Sederhana ini dapat dilihat pada halaman demo. Adapun membuat baris belang atau zebra stripes ini sifatnya optional. Cara ini bisa dilakukan dengan menambahkan sedikit CSS, dan CSS inipun bersifat universal, artinya bisa diterapkan pada semua jenis “pembelangan” baris 😆 Caranya, Anda cukup tambahkan kode berikut pada bagian akhir CSS di atas:

/* Kode CSS zebra stripes - membuat baris belang*/
pre.blockcode code span.line:nth-child(even) {
	background-color:#EBEAEA!important;
}

Sebagai informasi, untuk penomoran baris kode dan styling-nya, saya sendiri menggunakan penyorot sintak (syntax highlighter dan highlight.js). Namun cara ini membutuhkan resource tambahan berupa sejumlah Javascript dan CSS yang cukup besar. Walhasil blog akan melambat seperti ❗ Tentunya Anda tidak mau itu terjadi bukan? 🙁 Maka dari itu mudah-mudahan cara ini dapat menjadi solusi alternatif mempercantik tampilan Blog Anda. Oke deh, selamat mencoba dan semoga bermanfaat!

kode javascript