Cara Menambahkan Line Number Pada Syntax Highlight.js

Memang sebagian blogger menganggap Syntax highlighting sangat penting, terutama bari sobat blogger yang utamanya memuat artikel yang didalamnya terdiri dari CSS ataupun JavaScript. Menanggapi salah satu komentar dari teman blogger yang bertanya cara menambahkan line number pada syntax highlight.js. Saya coba menjelaskannya melalui postingan saya kali ini.
Syarat utama untuk menambahkan line number pada syntax highlight adalah blog sobat sudah memasang syntax highlighter. Terdapat 2 versi cara menambahkan system numbering pada tag pre. Anda harus memilih salah satu.
Pilihan Pertama
Bagi yang sudah memasang syntax, sobat tinggal menambahkan Javascript di bawah ini,Cukup dengan menambahkan JavaScript di bawah ini
(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>';
}
}
})();
Kemudian tambahkan CSS ini.
pre code,
pre .line-number {
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;
}
Pilihan Kedua
Mengganti sintax highlight.js dengan versi di bawah ini, kemudian ikuti langkah no. 1 dan 2.
Menambahkan Line Number Pada Syntax Highlight.js
1. Tambahkan CSS di bawah inipre.numbered .line-number {
display:block;
float:left;
text-align:right;
margin:-10px 12px -10px -12px;
padding:10px 12px;
background-color:#140F0F
}
pre.numbered .line-number span {
display:block;
position:relative;
color:#bbb;
}
pre.numbered .line-number em {
font:inherit;
position:absolute;
top:-5px;
left:100%;
margin-left:15px;
background-color:#bbb;
border-color:#bbb;
color:#000;
line-height:1;
padding:4px 5px;
display:none
}
pre.numbered .line-number em:before {
content:"";
display:block;
width:0;
height:0;
border:4px solid transparent;
border-right-color:inherit;
border-bottom-color:inherit;
position:absolute;
top:50%;
right:100%;
margin-top:-4px
}
pre.numbered .line-number span:hover em, pre.numbered .line-number span:target em {
display:block
}
2. Tambahkan JavaScript ini di atas </body>
window.you_addNumber = function () {
var a = document.getElementsByTagName('pre'),
pl = a.length,
s;
for (var i = 0; i < pl; ++i) {
s = '<span class="line-number">';
a[i].id = !a[i].id ? 'code-block:' + (i + 1) : a[i].id;
if (/(^| )numbered( |$)/.test(a[i].className)) {
var b = a[i].getElementsByTagName('code')[0];
for (var j = 0, k = b.innerHTML.split(/\n/).length; j < k; ++j) {
s += '<span id="code-line:' + (i + 1) + '-' + (j + 1) + '"><span>' + (j + 1) + '</span><em>code-line:' + (i + 1) + '-' + (j + 1) + '</em></span>'
a[i].innerHTML = s += '</span>' + a[i].innerHTML + '<span class="cl"></span>'
}
you_autoSelect(a[i].getElementsByTagName('code')[0]);
if (window.location.hash && /code\-line\:([0-9]+)\-([0-9]+)|code\-block\:([0-9]+)/.test(window.location.hash)) {
var h = window.location.hash;
window.location.hash = h
}
}
};
3. Cara Penerapan Dalam Posting<pre class="numbered"><code class="css">kode anda</code></pre>
<pre class="numbered"><code class="HTML">kode anda</code></pre>
<pre class="numbered"><code class="javascript">kode anda</code></pre>
<pre class="numbered"><code class="jquery">kode anda</code></pre>
4. Selamat Mencoba
terima kasih mas.
BalasHapusMas saya mencoba menghilangkan efek hovernya dan linknya gagal mulu, semoga bisa membantu :D
http://jsfiddle.net/Anonymousir/bxh57/
Maksudnya seperti ini ? http://jsfiddle.net/879Ww/
Hapusterima kasih sebelumnya
Hapusyup sama2... jngn kpok berkunjung kesini...
Hapusgk bakalan kapok pokoknya. :-d
Hapusmantab ,
BalasHapustapi saya sudah berhasil sekitar 5 bulan yang lalu :p :D
cara bikin widget TERAKHIR DI PERBAHARUI gimana ya mas, yang kaya di sidebarnya mas wahyu ini
BalasHapushttp://www.infokmu.com/2014/02/widget-daftar-posting-diperbaharui.html
Hapusterima kasih mas... ijin pakai
Hapusyup sma2...
Hapusjustru saya sebaliknya kang hehe
BalasHapusgan ko saya nggak bisa yah gan tanda < semuanya kesalahan mengurai xml katanya gan ..
BalasHapusdi bagian kode javascript nya gan mohon bantuannya
BalasHapusPenulisan javascriptnya seperti ini
Hapus<script type='text/javascript'>//<![CDATA[
paste javascript disini
;//]]></script>
mangstab bang. Ijin mencoba yah :) keren nih templatenya :)
BalasHapusyup sama2...
HapusMaaf kang, kalo syntax yang blog ini pakai minta di share dong, paket lengkapnya biar gak pusing menerapkan pada blognya. soalnya keren yang di pakai blog ini.
BalasHapusTerima kasih sebelumnya. Oya satu lagi kang, templatenya keren tapi sayang belum jadi makanan umum hehehe :p
pake versi yang di atas sob...
Hapustutorial langkah nih, amankan dulu ah o/
BalasHapus