Подсветка кода на сайте средствами Js и Css / ~#root -i
  • Блог
    • Unix-подобные ОС
    • Php
    • MySQL
    • JavaScript
    • Менеджеры пакетов
    • Docker
    • Seo
  • Короткие ссылки
  • Вход
  • Регистрация
  • Главная
  • JavaScript
  • Подсветка кода на сайте средствами Js и Css

Подсветка кода на сайте средствами 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 которые он создает, оформляются именно этими правилами.

root-i
21 Мая 18
309
0
Теги
JavaScript Css
Поделиться

Комментарии

Имя
Электронная почта
Рейтинг
Отзыв

Похожие посты

13 Декабря 2018

Анализ источника посетителей с помощью Sourcebuster.js или откуда пользователь перешел на сайт

Иногда, требуется вести внутренний учет источника, с которого зашел пользователь на сайт и к примеру сделал заказ. Рассмотрим пример, как узнать, откуда пользователь перешел на сайт. В этом нам поможет библиотека Sourcebuster.js, которая даст знать источник с которого перешел клиент на сайт ...
29 Января 2019

Gulp Error watch path ENOSPC в gaze.js или grunt.js

Рассмотрим возможность решения проблемы при запуске Gulp в Ubuntu 18.04 с ошибкой Error: watch /path/ ENOSPC. Разберем, что такое параметры max_user_watches.

02 Февраля 2020

Переместить блок в мобильной версии на JQuery

Рассмотрим как перенести блок в мобильной версии, если в десктопной версии он находится в другом месте. Воспользуемся средствами Jquery.

01 Апреля 2021

В input только числа на js

Простой скрипт на JS, фильтрация ввода информации в input. Ввод только чисел.

Категории

  • Unix-подобные ОС
  • Php
  • MySQL
  • JavaScript
  • Менеджеры пакетов
  • Docker
  • Seo
Rootcms интернет-магазин

Теги

Ubuntu 14.04 (14) Софт (9) Gearman (3) Сервисы (2) Framework (1) MVC (1) Php 5.6 (14) Cli (2) Propel (3) ORM (3) JavaScript (5) Css (1) Composer (4) Docker (3) Seo (4) MySQL (5) docker-compose (2) CentOS (1) 1С (1) Memcache (1) Memcached (1) Php 7 (4) Анализ (2) Ubuntu 18.04 (9) MySQL 5.7 (4) Генерация (2) Bower (1) Npm (1) NodeJs (3) Gulp (1) ImageCMS (2) Базы (1) JQuery (1) Сниппет (1)

Последние комментарии

tedy1, можно в index.php включить режим отладки и ...
root-i
18.03.21
Поставил версию PHP 5.6 и всеравно ломаются стили ...
tedy1
16.03.21
Игорь, скорее всего так определяет сам sourcebuste...
root-i
16.12.20
Не могу разобраться почему скрипт определяет перех...
Игорь
16.12.20

Делюсь информацией в которой я требовал помощи и разбираясь затрачивал много времени. Если мои знания помогли хотя бы одному человеку, значит этот сайт создан не зря.

Благодарность, на продолжение работы сайта:
Контакты

Обратная связь

Поиск по сайту

  • Вход
  • Регистрация

Сайт работает на chmod -R