Нумерация строк внутри тэгов pre,code используя css и javascript

Что бы добавить нумерацию строк, после тэгов </code> </pre>нужно вставить javascript

<script language="javascript">
(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>

Чтобы нумерация шла слева, перед строками исходника, нужно настроить оформление через css, например

body {
  background-color:white;
  padding:50px 50px;
}

pre {
  background-color:#eee;
  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;
}

На этой странице можно увидеть пример вывода исходного кода с нумерацией строк

Максим Макаров
У блога появился хостинг, его любезно предоставила компания Облакотека.
Облакотека - облачные сервисы для создания и управления виртуальной ИТ-инфраструктурой.
Если вам понравился мой блог и вы хотели бы видеть на нем еще больше полезных статей, большая просьба поддержать этот ресурс. Для этого достаточно кликнуть на контекстную рекламу, расположенную на сайте.
Оцените автора
IT Draft
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.