Вот более простой вариант без подсветки кода.
Подключаем к html
cssCSS
Код
.operative { font-weight: bold; border: 1px solid yellow; }
#quine { border: 4px solid #D3C694; }
body {
background-color:#FAFCFE;
padding:50px 50px;
}
pre {
background-color:#F2E9C0;
overflow:auto;
margin:0 0 1em;
padding:.5em 1em;
}
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;
}
И затем
Javascript должен идти после закрывающегося тега
</pre> (например в самом низу html)
JS
Код
(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>';
}
line_num.innerHTML += '<span>' + (j + 1) + '</span>';
}
})();
index.zip ( 1,79 килобайт )
Кол-во скачиваний: 458отключить выделение цифр в css дописываем(заменяем pre .line-number span на этот код) следующие строчки
Код
pre .line-number span {
display:block;
padding:0 .5em 0 1em;
/**
* Для эксплорера
*/
-ms-user-select: none;
/**
* Для мозилы
*/
-moz-user-select: none;
/**
* Для конкверора
*/
-khtml-user-select: none;
/**
* Для Сафари и Хрома
*/
-webkit-user-select: none;
}
Сообщение отредактировал FREEON - 18.6.2020, 11:50