Всё хорошо в том, как работает библиотека подсветки кода языков программирования highlight.js на страницах сайта, но... Но автор решил не включать в неё нумерацию строк обосновывая это решение тем, что без неё всё будет работать быстрее. Как же быть, если нужно включить нумерацию строк на страницах сайта там, где есть подсветка кода? Решение есть! Оно простое и о том, как в highlight.js сделать так, чтобы и код посветить и номера строк показать, будет рассказано ниже.
Установка библиотеки подсветки кода highlight.js на сайт
О том, как установить и настроить подсветку код на сайте с помощью двух файлов highlight.js подробно описано в → этой статье. Именно эту библиотеку и будем использовать в качестве базового решения задачи с подсветкой кода. Как было отмечено во вступлении, всё работает, нужно просто включить нумерацию строк.
Включение нумерации строк на сайте с подсветкой кода с помощью highlight.js
Для того, чтобы не изобретать велосипед, я воспользовался готовым решением от wcoder, который предлагает установить ещё два файла на сервер и подключить их в загрузку страниц на сайте, где нужно не только подсветить код, но и пронумеровать строки с помощью дополнительной библиотеки highlightjs-line-numbers.js. Текущая версия его кода 2.7.0.
Но! Зачем нагружать сервер дополнительными запросами, которые ему придётся обрабатывать и отдавать ещё один (или два) файла с диска? Проще взять и дополнить JavaScript исходного кода кодом нумерации строк. Тоже самое сделать с css-файлом со стилями исходного шаблона.
Так я и сделал.
Дополнения в файл с JavaScript для включения нумерации строк в highlight.js
В файл с JavaScript с подсветкой кода допишем алгоритм включения нумерации строк. И сразу добавим инициализацию обеих функций, убрав их кода шаблона эту строку (строка 2 ниже). Это ускорит работу сайта, так как у меня код шаблона сайта обрабатывается Apache, а статический контент отдаётся сразу сервером NGiNX. Итак, в конец файла highlight.pack.js дописываем:
!function(e,n){"use strict";function t(e){for(var n=e;n;){if(n.className&&n.className.indexOf("hljs-ln-code")!==-1)return!0;n=n.parentNode}return!1}function r(e){for(var n=e;"TABLE"!==n.nodeName;)n=n.parentNode;return n}function o(e){for(var n=e.toString(),t=e.anchorNode;"TD"!==t.nodeName;)t=t.parentNode;for(var o=e.focusNode;"TD"!==o.nodeName;)o=o.parentNode;var a=parseInt(t.dataset.lineNumber),i=parseInt(o.dataset.lineNumber);if(a!=i){var l=t.textContent,s=o.textContent;if(a>i){var c=a;a=i,i=c,c=l,l=s,s=c}for(;0!==n.indexOf(l);)l=l.slice(1);for(;n.lastIndexOf(s)===-1;)s=s.slice(0,-1);for(var d=l,u=r(t),f=a+1;f<i;++f){var h=m('.{0}[{1}="{2}"]',[b,T,f]),v=u.querySelector(h);d+="\n"+v.textContent}return d+="\n"+s}return n}function a(){var e=n.createElement("style");e.type="text/css",e.innerHTML=m(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[N,y,T]),n.getElementsByTagName("head")[0].appendChild(e)}function i(t){"interactive"===n.readyState||"complete"===n.readyState?l(t):e.addEventListener("DOMContentLoaded",function(){l(t)})}function l(t){try{var r=n.querySelectorAll("code.hljs,code.nohighlight");for(var o in r)r.hasOwnProperty(o)&&s(r[o],t)}catch(a){e.console.error("LineNumbers error: ",a)}}function s(e,n){"object"==typeof e&&g(function(){e.innerHTML=d(e,n)})}function c(e,n){if("string"==typeof e){var t=document.createElement("code");return t.innerHTML=e,d(t,n)}}function d(e,n){n=n||{singleLine:!1};var t=n.singleLine?0:1;return f(e),u(e.innerHTML,t)}function u(e,n){var t=v(e);if(""===t[t.length-1].trim()&&t.pop(),t.length>n){for(var r="",o=0,a=t.length;o<a;o++)r+=m('<tr><td class="{0} {1}" {3}="{5}"><div class="{2}" {3}="{5}"></div></td><td class="{0} {4}" {3}="{5}">{6}</td></tr>',[L,j,y,T,b,o+1,t[o].length>0?t[o]:" "]);return m('<table class="{0}">{1}</table>',[N,r])}return e}function f(e){var n=e.childNodes;for(var t in n)if(n.hasOwnProperty(t)){var r=n[t];p(r.textContent)>0&&(r.childNodes.length>0?f(r):h(r.parentNode))}}function h(e){var n=e.className;if(/hljs-/.test(n)){for(var t=v(e.innerHTML),r=0,o="";r<t.length;r++){var a=t[r].length>0?t[r]:" ";o+=m('<span class="{0}">{1}</span>\n',[n,a])}e.innerHTML=o.trim()}}function v(e){return 0===e.length?[]:e.split(x)}function p(e){return(e.trim().match(x)||[]).length}function g(n){e.setTimeout(n,0)}function m(e,n){return e.replace(/\{(\d+)\}/g,function(e,t){return n[t]?n[t]:e})}var N="hljs-ln",L="hljs-ln-line",b="hljs-ln-code",j="hljs-ln-numbers",y="hljs-ln-n",T="data-line-number",x=/\r\n|\r|\n/g;e.hljs?(e.hljs.initLineNumbersOnLoad=i,e.hljs.lineNumbersBlock=s,e.hljs.lineNumbersValue=c,a()):e.console.error("highlight.js not detected!"),document.addEventListener("copy",function(e){var n=window.getSelection();if(t(n.anchorNode)){var r;r=window.navigator.userAgent.indexOf("Edge")!==-1?o(n):n.toString(),e.clipboardData.setData("text/plain",r),e.preventDefault()}})}(window,document);
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();Сразу после этого нумерация срок в подсветке кода начинает работать, но выглядит кривовато. Поэтому в css-файл шаблона допишем дополнительные стили пары элементов:
.hljs-ln-numbers {
text-align: center;
color: #f36;
border-right: 1px solid #f36;
vertical-align: top;
min-width: 25px;
}
.hljs-ln-code {
padding-left: 10px !important;
}Теперь, как видно, всё замечательно: код подсвечен, нумерация строк включена!
Цвет нумерации строк задаётся в строке 3, цвет вертикальной черты, отделяющей нумерацию от кода, задаётся в строке 4.
Заключение
Для того, чтобы разобраться до конца нужно прочитать статью про включение подсветки кода на сайте по → этой ссылке. А после этого выполнить то, что написано выше.
P.S.
Не забудьте убрать из шаблона строку <script>hljs.initHighlightingOnLoad();</script>, — она теперь подключается в JS-файле.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)
