Подсветка кода на сайте средствами Js и Css / ~#root -i Подсветка кода на сайте средствами Js и Css / ~#root -i Подсветка кода на сайте средствами Js и Css / ~#root -i Подсветка кода на сайте средствами Js и Css / ~#root -i Подсветка кода на сайте средствами Js и Css / ~#root -i Подсветка кода на сайте средствами Js и Css / ~#root -i Подсветка кода на сайте средствами Js и Css / ~#root -i Подсветка кода на сайте средствами Js и Css / ~#root -i
  • RU
  • UA
  • EN
  • Создать интернет-магазин
  • Документация
  • Блог
    • Unix-подобные ОС
    • Php
    • MySQL
    • JavaScript
    • Менеджеры пакетов
    • Docker
    • Seo
  • Вспомогательные сервисы
    • Короткие ссылки
    • Oбмен просмотрами YouTube
  • Вход
  • Регистрация
  • Главная
  • 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
498
0
Теги
JavaScript Css
Поделиться

Комментарии

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

Другие статьи из категории

01 Апреля 2021

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

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

02 Февраля 2020

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

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

29 Января 2019

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

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

Категории

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

Теги

Ubuntu 14.04 (17) Софт (11) Gearman (3) Сервисы (2) Framework (1) MVC (1) Php 5.6 (16) Cli (3) 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 (6) Анализ (2) Ubuntu 18.04 (13) MySQL 5.7 (4) Генерация (2) Bower (1) Npm (1) NodeJs (3) Gulp (1) ImageCMS (2) Базы (1) JQuery (1) Сниппет (1) Apache (1) Cron (1)

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

alex, я вижу 2 причины почему так может быть. Не в...
root-i
04.07.22
Сделал все так как написано в статье, не работает.
alex
04.07.22
Как вариант это может происходить из-за неизвестно...
root-i
21.01.22
Чтобы убрать ошибку Uncaught TypeError: $ is not a...
wlad2.ru
11.01.22

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

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

Telegram Viber Mail

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

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

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