Cara Membuat Baris Angka / Nomor di Syntax Highlighter

Daftar Isi

Cara membuat baris angka / nomer di highlighter blogger - Syntax Highlighter biasanya digunakan sebagai tempat untuk menampilkan kode-kode seperti css, html ataupun javascript. Untuk menampilkan syntax highlight di postingan blogspot biasaya menggunakan atribut tag pre, tetapi ada juga menggunakan code. Menempelkan kode-kode tersebut pada postingan harus diparse terlebih dahulu, agar dapat tampil kode yang akan diunggah.

Fungsi Highlighter

Highlighter mempunyai beberapa fungsi yang bermanfaat bagi para blogger meningkatkan kualitas tampilan artikel di blog. Berikut adalah beberapa kegunaan dari highlighter pada postingan Blogger :

• Menggunakan Highlighter dapat meningkatkan keterbacaan kode CSS, HTML dan JavaScript yang ditampilkan di blog. Jadi dapat mempermudah pembaca memahami kode-kode yang diunggah pada artikel tersebut.
• Penggunaan highlighter memberikan kesan profesional pada tampilan blog.
• Menggunakan highlighter sangat membantu pembaca dalam melihat struktur dan logika di balik implementasi kode tersebut.
• Bagi para blogger yang ingin berbagi pengetahuan dan keterampilan pemrograman, highlighter dapat menjadi alat yang sangat berguna. Dengan kode yang lebih terorganisir dan jelas, pembaca akan lebih mudah memahami tutorial atau panduan yang diberikan.

Jadi intinya, dalam penggunaan syntax highlighter pada postingan Blogger sangat bermanfaat untuk meningkatkan keterbacaan kode-kode oleh pembaca dan mempermudah pemahaman kode yang ada di artikel tersebut.

Nah, kalian pasti sudah paham fungsi dan kegunaan syntax highlighter pada postingan blog. Untuk lebih menarik tampilannya saya buatkan tutorial menambahkan baris nomor otomatis pada highlight-nya.

Untuk contoh demonya seperti berikut ini.

Membuat Baris Angka / Nomor di Highlighter

Setelah memahami fungsi kegunakan highlighter diatas, selanjutnya saya akan bagikan cara membuat baris angka pada syntax highlighter.

Berikut ini cara dan langkah membuat baris nomer di syntax highlighter blogger :

Silahkan masuk di dasboard Blogger , pilih pada Tema dan selanjutnya pilih Edit HTML. Tempelkan kode js berikut ini di atas /body.

<script type='text/javascript'>//<![CDATA[
   (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>

Memasang baris angka pada syntax highlighter di blogger dapat digunakan yang memakai atribut tag pemanggil kode <div class="pre"><pre> dan <pre><code>, jangan lupa kode html ataupun javascript harus diparse terlebih dahulu sebelum dipublish. Silahkan masuk disini untuk memparse kode-kode tersebut.

Selanjutnya salin kode css berikut ini dan tempelkan kode css tersebut diatas </style> atau ]]></b:skin>..

/* Numbering Highlighter */
pre .line-number{float:left;margin-left:-2.1em;margin-right:1em;border-right:2px solid #cdcdcd;min-width:2.5em;font:13px;color:#444;background-color:#f6f6f6;cursor:context-menu;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;counter-increment:linecounter;justify-content:center;flex-basis:20px;flex-shrink:0;position:sticky;position:-webkit-sticky;left:-20px;top:0;z-index:1}
pre .line-number span{display:block;padding:0 .5em 0 1em}

Sesuaikan sendiri kode untuk warnanya.

Setelah selesai, jangan lupa klik Simpan pada template.

Kamu juga dapat membuat pre syntax highlighter seperti tutorial berikut ini.

Baca :

• Cara Membuat Syntax Highlighter Ringan di Blogger

Membuat highlighter seperti tersebut cukup ringan dalam loading postingan blog, kamu dapat membuat dan menerapkannya dalam postingan yang menampilkan source code.

Penutup

Cukup mudah bukan? Demikian cara membuat baris nomor pada syntac highlighter di blogger. Semoga dari blog ini apa yang kamu cari dapat ditemukan. Terima kasih telah berkunjung dan membaca.