Как сделать подсветку кода

Ленивая подсветка синтаксиса кода с помощью highlight.js

В этой статье рассмотрим, как подключить highlight.js к сайту и настроить с помощью этого инструмента подсветку синтаксиса кода. Для реализации ленивого выполнения highlight.js воспользуемся Intersection Observer API.

Исходный код

Файлы решения для отложенной подсветки синтаксиса кода, расположенного в элементах , находятся на Github.

Для вставки данного решения на страницу к ней необходимо подключить файлы main.css и main.js:

Скрипт «main.js» в свою очередь добавляет в документ ещё два файла «highlight.min.css» и «highlight.min.js». Настроить их расположение можно посредством редактирования следующих строк в «main.js»:

Пример подсветки JavaScript кода с помощью «highlight.js»:

Описание процесса реализации ленивой подсветки синтаксиса кода

Задачу по ленивой подсветки синтаксиса кода, содержащегося в , выполним с помощью «highlight.js» и Intersection Observer API.

Для этого сначала напишем две функции:

• loadCSSandJS() – для динамического подключения «highlight.js» к странице;
• highlight() – для подсветки контента элементов, находящихся в массиве elements .

После этого напишем код с использованием Intersection Observer API, который будет запускать уже созданные функции, когда

Для использования «highlight.js» на веб-странице необходимо подключить стили и скрипт.

Обычно это осуществляется так:

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

Для подсветки синтаксиса воспользуемся методами hljs .

Когда язык установлен, то будем вызывать метод highlight :

В противном случае highlightAuto :

Реализуем функцию highlight следующим образом:

Этап 2. Организация ленивого выполнения функции для раскраски кода

Подсветку синтаксиса кода будем выполнять не сразу после загрузки документа, а только в тот момент, когда элемент

Конструктору IntersectionObserver в круглых передадим 2 аргумента:

функцию обратного вызова cb , которая будет выполняться всякий раз, когда отслеживаемые

Добавим элементы, за которыми необходимо наблюдать в observer . Это осуществляется с помощью метода observe :

Функцию обратного вызова реализуем следующим образом:

В ней мы пробежимся по целевым элементам и добавим в массив elements те из них, которые пересекли область просмотра. Далее выполним их раскраску.

Источник

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

Да, я знаю, что такое синтаксический анализ. И знаю много разных библиотек для подсветки чего угодно. Только это всё не то, когда надо подсветить простенький примерчик, не содержащий всяких кодоизвращений. И уж совсем негоже тянуть для этого много-много байт _правильно_ разбирающих _любой_ код.

Для случаев без кодоизврата (а их большинство) можно использовать такой код:

Пример

Обратите внимание на баг в последней строке. Об этом разговор далее

Область применения, баги

Данный код заточен на javascript, о чём можно судить по ключевым словам. Сделать код понимающим любой Си-подобный язык не представляет труда.

Возиться с многострочными комментариями я не стал, как и с многострочными строками, ибо не так уж частно многострочные комменты используются в примерах, а к многострочным строкам в javascript я как-то не привык.

Еще чем плох данный подход — текст «плоский», то есть этот, с позволения сказать, анализатор, считает слово for внутри строки или комментария таким же ключевым словом, как и все их. Нас это не устраивает, поэтому используются css правила .str span и .comm span, дабы возложить на плечи CSS распознавание блочной структуры кода. Одна проблема возникает — когда строка содержит комментарий, который содержит ключевое слово или пользовательскую функцию. В этом случае мы не взирая на окончание строки всё считаем строкой (до символа перевода строки).

И ещё, двойных кавычек не существует. Можно добавить еще один replace:
Но меня от этого что-то удерживает.

Источник

Как сделать подсветку кода

В этой рубрике Вы найдете уроки, которые относятся к теме создания сайта, но не попали ни в один раздел.

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта — процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Распознавание текста из изображений через командную строку

Для человека не составляет особого труда посмотреть на изображение и прочитать представленный текст. Для машины данный процесс не так прост. Однако с помощью imgclip вы сможете быстро выполнить данную операцию.

Источник

Подсветка синтаксиса для собственного языка

Подсветка синтаксиса — задача простая и решалась много раз. Но есть у нее одна неприятная особенность — если мы хотим подсветить синтаксис нового языка (например, языка bb-тэгов хабраредактора, или лога какой программы), то большинство решений включает создание грамматики, парсера, и затем встраивание это всего куда-нибудь. А что делать, если получить подсветку для логов желание есть, а тратить на это три часа желания нет?

Подходящий текстовый редактор

Прежде, чем раскрашивать текст нужно выбрать текстовый, редактор в котором мы будем этим заниматься. Текстовых редакторов у нас море, на любой вкус и цвет. Что нам нужно? Что-нибудь простое, конечно бесплатное, чтобы работало под любой операционной системой, чтобы текст было удобно редактировать. Ну и конечно чтобы встраивание своей подсветки синтаксиса не превратилось в перекомпиляцию хардкорного кода на С со встраиванием туда PEG грамматики :). Как не странно, даже с таким требованием текстовых редакторов много. Выбираем scite, потому что его я знаю лучше всего :). Под windows качать отсюда, под MacOS и *NIX можно прямо из репозитория. Устанавливаем, запускаем, получаем примерно следующее:

Подключаемся к внутренностям редактора

Hello world

Теперь при каждом запуске scite он будет автоматически загружать и исполнять указанный скрипт. Проверим что все работает классическим способом — добавим в пустой файл scite.lua команду, выводящую в scite всем известный текст:

Если теперь запустить scite, то мы увидим результат:

В появившемся специальном окне, которое гордо именуется ‘output window’, будет отображен текст, который мы в скрипте указали на вывод. С помощью команд print() в скрипте и output window можно достаточно легко отлаживать скрипты и выводить нужную нам информацию — например, количество смайликов в нашей статье :).

Готовимся к покраске

Убедившись в успешном подключении к нутру текстового редактора, можно приступить к покраске. Для успешной покраске нам нужно будет воспользоваться принципом ioc и скрипте указать scite чтобы он консультировался с нами каждый раз, когда обновляется текст. Для этого достаточно задать функцию со специальным именем:

function OnUpdateUI()
print( «text update» )
end

Эта функция будет вызываться каждый раз, когда текст в окне текстового редактора поменяется. Следующая картинка показывает что будет, если запустить тестовый редактор и ввести ‘a’ — массовые вызовы функции-обработчика нам обеспечены:

Красим

Вообщем-то все готово: есть функция, которую будут автоматически вызывать каждый раз, когда меняется текст. Можно красить. Самое ценное в scite то, что он является редактором, демонстрирующем работу scintilla — библиотеки для создания окошек по редактирования текста. А библиотека, между прочим, популярная — Komodo Edit, wxWidgets, GTK используют для редактирования текста как раз ее. И есть у этой библиотеки штатный механизм взаимодействия со всем и вся, SCT_ сообщения. Подробная документация на сайте доходчиво объяснит, какие именно сообщения и в какой последовательности нужно отправить, чтобы текстовый редактор встал раком раскрасил текст, подчеркнул нужные нам слова и расставил красивых меток на полях. В частности, для того чтобы покрасить текст достаточно отправить два сообщения:

• SCI_STARTSTYLING с указанием номера символа начиная с какого красить. первый символ имеет номер 1
• SCI_SETSTYLING с указанием количества символов которые красить и номера цвета

Следующий код раскрасит каждый второй символ в какой-то цвет:

function OnUpdateUI()
text = editor:textrange( 0, editor.Length )
for i = 1, string.len( text ), 2 do
scite.SendEditor( SCI_STARTSTYLING, i, 31 )
scite.SendEditor( SCI_SETSTYLING, 1, 5 )
end
end

Обратите внимание на пару нюансов: ’31’ — это маска для номера стиля, просто некое волшебное число которое нужно всегда передавать этой функии. ‘5’ — это номер цвета. По умолчанию scite сопоставляет каждому номеру какой-нибудь цвет. Для нашего примера результат будет выглядеть… странно:

Источник

Создаём подсветку синтаксиса в Notepad++

Программируя в 1С привыкаешь к подсветке синтаксиса, используемой в конфигураторе, но когда хочешь распечатать исходник какого-либо модуля, чтоб вечерком посидеть с карандашом и подумать над написанным, то возникает некоторая проблема: а как же его распечатать с сохранением подсветки? Копипаст в текстовый редактор — потеря раскраски, печать напрямую из конфигуратора — тот же результат.

В последнее время подсел на notepad++, он умеет печатать с выбранной подсветкой синтаксиса, но проблема в том, что нет подсветки именно для языка, используемого в 1С. Долго и безрезультатно искал нужную подсветку синтаксиса. Нашел на одном сайте, но они просят денег и нет гарантии, что это то самое искомое.

Попытался сам вручную создать подсветку, но все шаманства с xml файлами не приводили к успеху. Наткнулся на статью «Включаем подсветку синтаксиса для less файлов в Notepad++», ожидал увидеть там рецепт создания этой самой подсветки, но как и многие комментирующие был разочарован содержанием поста. В результате копания мануалов у меня получилось таки создать нужную мне подсветку. Оказывается это совсем не сложно! Итак приступим:

1. Открываем Notepad++.
2. Для удобства открываем текстовый файл с кодом, который будем раскрашивать.
3. В меню «Синтаксис» выбираем параметр «Свои настройки»
4. В меню «Вид» выбираем пункт «Пользовательское определение языка» или нажимаем на панели инструментов кнопку:
   
   Откроется окно настроек синтаксиса. Можно нажать кнопку «Стыковать» в правом верхнем углу (которая может называться «Dock», в зависимости от полноты перевода интерфейса), чтоб прилепить к правому краю окна. Плюсом такого решения будет полоса прокрутки, дающая возможность добраться до нижних параметров, которые могут просто не влезть по вертикали в монитор
5. На вкладке «Стандартный» настраиваем базовый стиль отображения в разделе «Настройка стандартного стиля»: основной шрифт, размер, цвет фона и текста, который не будет попадать под остальную раскраску. Все параметры применяются сразу и любые изменения можно наблюдать воочию.
   
   На этой же вкладке в разделе «Настройка открытия ключевых слов» указываем теги группы, по которым определяются блоки текста. Например, у нас блоком является все, что между операторами «Процедура» и «КонецПроцедуры», следовательно «Процедура» пишем в первое поле, а «КонецПроцедуры» в поле ниже. Для каждой группы можно указать отдельные настройки шрифта и цвета. Ключевые слова разделяются пробелом. Добавим туда процедуры циклов и условий, чтоб можно было сворачивать их в группы.
6. С блоками разобрались, теперь подкрасим ключевые слова. Для этого нам понадобится вкладка «Списки ключевых слов». Здесь нам доступны 4 группы, которые мы можем использовать как нам заблагорассудится. Добавляем в первую все операторы, которые нужно выделить цветом, это будут всякие «Перем», «Выбрать» и т.п. Во вторую группу пропишем инструкции препроцессора «#» и поставим галочку «Префикс» для того, чтоб цветовая схема распространилась и на слово после этого символа.
   
7. Плавно переходим на вкладку раскраски комментариев. Заполнение этой вкладки не должно вызвать каких-либо затруднений.
   
8. Вкладка «Операторы» немного отличается от описанных выше. Здесь нам предоставляют список одиночных операторов, которые мы можем раскрасить. При помощи кнопки со стрелкой переносим нужные нам операторы в поле «Активные операторы» и ниже выставляем параметры раскраски. Чекбокс «Включить знак перехода» мне ничем не помог, так как при включении появляются в поле китайские символы и никак не хотят меняться. Далее следует группа разделителей: тут указываем цветовые и шрифтовые параметры для окавыченного текста. Думаю затруднений не составит сделать настройки на свой вкус.
   
9. Теперь осталось сохранить наше творение под каким либо именем. Для этого в верхней части окна нажимаем кнопку «Сохранить как. » и вводим имя нашей синтаксической подсветки. Раскраска сохраняется в специальном файле userDefineLang.xml. Настройки можно экспортировать в отдельный файл, который в последствии можно распространять.
   
   Кстати чекбокс «Любой регистр» почему-то игнорируется и подсветка остаётся регистрозависимой.

Всё! Наконец-то теперь можно распечатать код в цвете:

Единственное неудобство — это выбирать подсветку синтаксиса вручную при каждом открытии файла.

Ссылка на готовый xml для подсветки языка 1С на Github. Для использования у себя нужно сделать импорт через «Пользовательское определение языка» и перезапустить Notepad++.

Источник