Menambahkan Nomor Baris Syntax Highlight di Blogger

Di artikel sebelumnya kita sudah membahas bagaimana cara membuat syntax highlight untuk menampilkan sumber kode seperti CSS, HTML atau javascript di blog.

Tutorial kali ini kita akan coba menambahkan nomor baris pada blok sumber kode pre atau code tersebut agar lebih menarik pada setiap bari kode.

Cara Membuat Syntax Highlight Mirip Github Code di Blogger - InpuTekno

Tutorial cara memasang dan menggunakan syntax highlight mirip tampilan warna Github code.

www.inputekno.com

Cara Menambahkan Nomor Baris Blok Kode

Pertama buka dasbhoard blogger > Template > Edit HTML

Kemudian salin dan letakan kode javascript berikut tepat di atas kode </head> template.

function lineToSpan(n) {
  for (var e = n.innerHTML.split("\n"); n.childNodes.length > 0;) n.removeChild(n.childNodes[0]);
  for (var a = 0; a < e.length; a++) {
    var l = document.createElement("span");
    l.className = "line-wrap", l.innerHTML = '<span class="line-number"></span><span class="line-code">' + e[a] + "</span>", n.appendChild(l)
  }
}
window.addEventListener("load", (function() {
  for (var n = document.getElementsByTagName("pre"), e = 0; e < n.length; e++) lineToSpan(n[e])
}), !1);

Jika kalian menggunakan format penulisan kode menggunakan tag <pre><code>...</code></pre>, silakan ganti kode js yang di tandai dengan tag code.

Berikutnya letakan CSS berikut ini tepat di atas kode </style> atau ]]></b:skin>.

pre {
	counter-reset: linecounter; /* Membuat variabel penghitung baris */
	padding-left: 0
}
pre .line-wrap {
	display: flex;
	padding: 0;
	margin: 0
}
pre .line-number {
	counter-increment: linecounter;
	display: flex;
	justify-content: center;
	padding: 0 16px;
	border-right: 1px solid #ccc;
	flex-basis: 20px;
	flex-shrink: 0;
    width: 20px;
	position: sticky;
	position: -webkit-sticky;
	left: 0;
	top: 0;
	z-index: 1;
	background: #f6f6f6
}
pre .line-number::before {
	content: counter(linecounter); 
}
pre .line-code {
	flex: 1;
	margin: 0;
	padding-left: 5px
}
/* Dark mode */
.drK pre .line-number {
	background:#1f2224;
}

Setelah selesai, jangan lupa klik SAVE template.

Penutup

Nah itu tadi tutorial cara menambahkan nomor baris blok kode di blogger. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman-teman yang membutuhkan.