Подсветка кода на сайте средствами 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(/([a-z\_\$][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 которые он создает, оформляются именно этими правилами.