Підсвічування коду на сайті засобами Js та Css

Ведучи свій сайт, описуючи рядки коду, я став помічати, що для кращої читання потрібне мінімальне підсвічування. Трохи погугливши, я натрапив на десятки рішень на базі різних фреймворків. Я не горів бажанням багато цією дрібницею займатися (все ж ліньки - двигун прогресу). Натрапив на найпростіший спосіб такої реалізації засобами Js та Css. Справжній вихідник тут .

Так як у мене на сайті підключений jQuery, я взяв цей код Js :

(function($){

$.fn.syntax = function(){
return this.each(function(){
var jqCode = $(this);
var code = jqCode.html();
code = code
.replace(/(var|function|typeof|new|return|if|for|in|while|break|do|continue|case|switch)([^a-z0-9\$_])/g,'<span class="kwrd-code">$1</span>$2')
.replace(/(\{|\}|\]|\[|\|)/gi,'<span class="kwrd-code">$1</span>')
.replace(/(\/\/[^\n\r]*(\n|\r\n))/g,'<span class="comm-code">$1</span>')
.replace(/('.*?')/g,'<span class="str-code">$1</span>')
.replace(/([az\_\$][a-z0-9_]*)\(/gi,'<span class="func-code">$1</span>(')
.replace(/\t/g,' ');
jqCode.html(code);
});
}

})(jQuery);

$('code.code').syntax();

Можна зрозуміти, що replace за правилами потрібні нам вирази, лапки і просто правила на span з певними класами.

Щоб цей код подіяв, вставте його в js-файл і підключіть на свій сайт.

Рядок $('code.code').syntax() - запускає код для тега code у якого є клас code. <code class='code'></code> .

І ось цей синтаксис :

.str-code{color:red}/* Рядки червоні */
.func-code{color:blue}/* Користувач-функції сині */
.comm-code{color:orange}/* Коменти оранжеві */
.kwrd-code{font-weight:bold}/* Ключові слова напівжирні */
.str-code span{color: red;font-weight:normal}/* Все всередині рядка — рядок */
.comm-code span{color:orange;font-weight:normal}/* Все всередині коментаря — коментар */

Аналогічно слід створити файл css і підключити його до сторінки, де використовується верхній js скрипт. Оскільки всі span, які він створює, оформляються саме цими правилами.