подсветка кода на сайте

Подсветка кода через Rainbow

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

Сам сайт скрипта, откуда его можно скачать.

У Rainbow есть ряд преимуществ:

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

Для начала скачиваем программу, выбрав нужные языки. Желательно указать версию Development (рис. 1), в архиве тогда будет идти папка с темами и сжатая версия скрипта.

Рис. 1. Выбор языков

Подключение скрипта происходит двумя методами, в зависимости от выбранной версии — Production или Development. Для Production версии все скрипты упакованы в один файл, его и достаточно только подключить. Заодно включаем желаемый стиль оформления.

Для Development версии подключение основного скрипта и скриптов с языками происходит раздельно.

Изменение цвета элементов происходит автоматически, путём выделения отдельных фрагментов кода через с классом. Поэтому задать цвет или другие параметры самостоятельно довольно легко, за основу можно взять готовую стилевую тему и на её основе сделать свою.

Источник

Топ 5: Лучшие плагины кода подсветки кода JavaScript

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

5. SHJS

SHJS — это скрипт JavaScript, который выделяет фрагменты исходного кода в документах HTML. Документы, использующие SHJS, выделяются на стороне клиента веб-браузером. SHJS использует определения языка из GNU Source-highlight. Это дает SHJS возможность выделять исходный код, написанный на разных языках. SHJS должен работать в любом браузере, который соответствует стандартам HTML 4, ECMA-262 и DOM Level 2 (я знаю, он слишком старый, но предоставляет запасной вариант для слишком старых браузеров, и это может пригодиться).

Чтобы использовать SHJS, вам нужно как минимум 3 файла:

4. SyntaxHighlighter

SyntaxHighlighter — это полнофункциональная автономная программа подсветки синтаксиса кода на стороне клиента, разработанная в JavaScript.

Чтобы заставить SyntaxHighlighter работать на вашей странице, вам нужно сделать следующее:

Чтобы инициализировать код JavaScript, вы можете использовать:

К сожалению, SyntaxHighlighter не поддерживает какой-либо стандарт, поэтому ваша разметка будет выделена этим плагином и не будет так легко обслуживаться.

3. радуга

Rainbow — библиотека подсветки синтаксиса кода, написанная на Javascript. Он был разработан, чтобы быть легким (1,4 КБ), простым в использовании и расширяемым. Это полностью настраиваемый с помощью CSS. Радуга сама по себе очень проста. Он проходит через блоки кода, обрабатывает шаблоны регулярных выражений и переносит соответствующие шаблоны в теги. Все темы оставлены на усмотрение CSS.

В вашей разметке атрибут data-language используется для указания того, какой язык использовать для выделения:

Используйте метод Rainbow.color, чтобы выделить код:

2. highlight.js

Highlight — это супер-подсветка кода DOM. Он пытается автоматически определить язык. Если автоматическое определение не работает для вас, вы можете указать язык в атрибуте класса:

Чтобы использовать highlight.js в вашем проекте, просто включите файлы css (1) и js (1) и инициализируйте их initHighlightingOnLoad() метод:

Требуемая разметка должна выглядеть так:

1. Prism.js

Prism — это легковесная расширяемая подсветка синтаксиса, созданная с учетом современных веб-стандартов. Он используется на тысячах веб-сайтов, включая некоторые из тех, которые вы посещаете ежедневно.

Наш Code World использует призму, чтобы выделить примеры кода

дополнительный

Microlight.js

В отличие от других решений для подсветки кода, microlight.js не поддерживает набор правил для многих языков. Вместо этого он использует общую стратегию выделения, обеспечивающую разумное выделение для большинства языков программирования. В результате:

Фактически, microlight.js не заботится о том, на каком языке написан код, и не заботится о структуре кода. Он просто просматривает код и выделяет его.

EnlighterJS

EnlighterJS требует MooTools.Core> = 1.4.5.

Google Prettyprint

Поместите фрагменты кода в

Если вы знаете еще один замечательный плагин для подсветки синтаксиса, поделитесь им с нами в поле для комментариев. Повеселись

Источник

Редактор с подсветкой кода. Проблемы и решения

Большая часть аудитории Хабра регулярно пишет код. В текстовом редакторе или IDE. И сколько бы не было в нем окошек и менюшек, а сердце любого редактора — это компонент (widget), который редактирует и подсвечивает код.

Больше года назад на Хабре был цикл статей от namespace про компонент QScintilla (1, 2, 3), и моя статья с его критикой. Получилась некоторая недосказанность. Ясно, что все плохо, но не понятно, что делать.

Сейчас я написал свой велосипед компонент под названием Qutepart, и у цикла есть продолжение.
Эта статья расскажет о том, как устроена подсветка синтаксиса в моем проекте: какие проблемы возникали, и как они решались. Она про подходы, а не про специфику конкретного GUI-инструментария. Если интересно заглянуть «под капот» текстового редактора, добро пожаловать под кат.

Сразу оговорюсь, что это не фундаментальная научная статья. Это мой опыт. Будет очень интересно почитать в комментариях про альтернативные подходы и решения.

Мотивация

Я делаю текстовый редактор в духе vim и emacs. Универсальный, кроссплатформенный, расширяемый, ориентированный на опытных пользователей. Но с чуть более интуитивным и современным GUI на PyQt. И для этого мне нужен редактор кода.
Вариантов нашлось всего 2: QScintilla и katepart.
Изначально я использовал QScintilla, но из-за недостатков, перечисленных здесь, решил от него отказаться.
katepart очень хорош, но не устраивает тем, что зависит от библиотек KDE. А иметь их в зависимостях не очень удобно, особенно для Windows и MacOS.

Разбор кода

Мой проект не ориентирован на какую-то конкретную технологию, языков хочется подсвечивать много. Больше, чем я в состоянии освоить сам. Поэтому было решено использовать существующую базу описаний синтаксиса от katepart.

Для каждого из поддерживаемых языков программирования в katepart существует Highlight Definition — XML-файл с описанием синтаксиса и подсветки.
Highlight Definition описывает нечто вроде конечного автомата. Автомат последовательно разбирает текст, меняя при этом свое состояние — «Context». У каждого из контекстов есть набор правил, по которому нужно перейти в другой контекст. Автомат помнит, из какого состояния он перешел в текущее, и может возвращаться в предыдущие контексты (стек контекстов).
Пример: C++. В контексте код есть правило: если встретился символ » — перейти в контекст «строка». Контекст «строка» подсвечивает символы красным цветом и подержит правило: если встретился символ » — вернуться в предыдущий контекст.
Для каждого из контекстов задан стиль, которым он подсвечивает текст.

Система очень удобная и универсальная. Формат файлов хорошо документирован. Наверное, именно поэтому katepart подсвечивает около 2 сотен языков и форматов.
Минусом, на мой взгляд, является лишь то, что интерпретатор, который разбирает код на основе Syntax Definition, в большинстве случаев будет хуже по производительности, чем парсер для конкретного языка программирования.

Оптимизация

Когда я написал подсветку синтаксиса, радости моей не было предела. Все работает, все красиво. Все 59 файликов на разных языках из коллекции katepart выглядят правильно и открываются шустро. Ура! Кто сказал, что Python медленный язык?!
А потом я попробовал открыть большой файлик. Реально большой. И внезапно оказалось, что мой парсер не так уж и быстр. Пришлось браться за оптимизацию.

Пару часов с профайлером ускорили подсветку в несколько раз. Но, все равно получалось слишком медленно. А пространство для оптимизации было практически исчерпано. Можно было ускорить парсер еще на пару десятков процентов за счет жутко запутанного кода, но такая оптимизация погоды не делает.

Я стал осваивать написание модулей на C. Это оказалось совсем не сложно, Python к расширениям очень дружелюбен.
В процессе написания парсера возникла проблема: в C нет регулярных выражений. А зависимости подключать очень не хотелось. Проблема решилась за счет того, что взаимодействие C-Python работает в 2-х направлениях. Python вызывает C для парсинга, а из С дергается функция на Python для того, чтобы проверить регулярное выражение.

Когда я начал тестировать парсер с расширением, выяснилось, что производительность не существенно отличается от версии на Python. Снова взял профайлер и пошел искать проблему.
Оказалось, что 90% времени мой парсер вызывает Python для проверки регулярных выражений. Что же, хак не удался. Пришлось использовать внешнюю библиотеку. Так у компонента появилась единственная зависимость — библиотека обработки регулярных выражений на C pcre. С ней производительность получилась вполне приемлемой (цифры будут ниже).

В итоге в целесообразности использования Python я не разочаровался. Парсер на C — это примерно 1/3 кодовой базы моего компонента. Думаю, по трудозатратам такой гибридный вариант получился легче, чем решение на С++.

Асинхронная подсветка

Большинство текстовых файлов довольно небольшие по размеру. Но иногда мне приходилось редактировать исходники, в которых больше 300К строк. Насколько бы не был крут разработчик парсера, и насколько бы не был быстр его язык, а разбираться до конца такой файл будет дольше, чем пользователь согласен ждать.

katepart подсвечивает код в потоке GUI. И делает это лениво — подсвечивается столько, сколько нужно отрисовать на экране. Такой подход очень хорошо работает, если файл открывается в начале. Однако если перескочить в конец большого файла — GUI просто зависает. Меня такой подход не устроил.

vim и emacs при необходимости отрисовать конец большого файла разбирают текст с середины. Подход хорош тем, что позволяет не блокировать GUI надолго при подсветке. Но не все так просто. Языки программирования разбираются последовательно. Например, чтобы правильно обработать символ конца многострочного комментария, нужно знать, начался ли комментарий в предыдущей строчке. Получается, что в некоторых случаях парсинг с середины будет выдавать неправильную подсветку (как на скриншоте из vim).

Сейчас, когда рост тактовых частот перешел в рост количества ядер, часто актуальна оптимизация вычислений за счет разделения по ядрам. Но и здесь возникают проблемы, и не только потому, что парсить файл нужно последовательно.
Пользователь постоянно редактирует код. Поток GUI обрабатывает нажатия клавиш и меняет документ. Если при этом документ парсится и подсвечивается в потоках, изменения нужно синхронизировать. Инструментарий Qt пока не везде ориентирован на многопоточность, я не нашел способа надежно синхронизировать доступ к документу. Пришлось от потоков отказаться.

В итоге экспериментов у меня получилось следующее решение: файл разбирается и подсвечивается в потоке GUI по таймеру. Таймер работает 20 милисекунд, потом возвращает управление в main loop для обработки действий пользователя, потом снова вызывается… Если пользователь открыл огромный файл и сразу перескочил в его конец — файл отображается, но без подсветки.
Код можно править, а подсветка появится чуть позже.

Инкрементальная подсветка

Когда пользователь редактирует код — подсвечивать заново текст нужно с того места, которое редактируется, а не с начала. И, как правило, меняется одна или несколько строк.

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

Сравнение производительности

Я открыл большой C++ файл (364121 строка) в нескольких редакторах, которые мне интересны, и собрал свои наблюдения в эту таблицу.

Компонент или редактор	Время на подсветку всего файла	Блокирует GUI	Проблемы подсветки
Qutepart	44 секунды	Никогда	Открывает файл 3 секунды
katepart	Был убит через 6 минут	Пока не подсветит столько, сколько нужно отобразить
QScintilla	3 секунды	Никогда	Тормозит при редактировании
Scintilla	3 секунды	Никогда	Тормозит при редактировании
Sublime Text	23 секунды	При редактировании, пока не обновит всю изменившуюся подсветку
gedit	8 секунд	Никогда	Тормозит при редактировании
Qt Creator	20 секунд	При редактировании висит, пока не обновит всю изменившуюся подсветку
Ninja IDE	14 секунд	При открытии	Подсветил только первые 51 строки. Жутко тормозит при редактировании.
vim	Мгновенно	Никогда	Парсит файл с середины, в некоторых случаях показывает неправильный результат.
emacs	Мгновенно	Никогда	Парсит файл с середины, в некоторых случаях показывает неправильный результат. Вешается на время около минуты при перемотке вверх.

Подробная версия таблицы
Как видим, Qutepart медленнее всех подсвечивает текст. Это закономерно, поскольку используется интерпретируемый язык, связка Python-Qt и интерпретируемые определения синтаксиса в виде XML.
С другой стороны, высокоуровневый язык и технологии позволяют подсвечивать много языков, не блокировать GUI и не показывать артефактов.
При работе с реальными файлами в абсолютном большинстве случаев файл открывается уже подсвеченным, и при редактировании пользователь не видит, как обновляется подсветка. Поэтому текущее положение дел меня устраивает и от дальнейшей оптимизации я отказался.

И что же получилось

У меня получился компонент для редактирования кода Qutepart и текстовый редактор на его основе Enki.
Зависит компонент от PyQt и от pcre. Требует сборки модуля расширения на C. Для небольших файлов можно обойтись без расширения и без pcre.
Из katepart позаимствованы файлы Syntax Definition и алгоритмы выравнивания кода.
Как и katepart, проект доступен под LGPL.

Сегодня я выпустил первую версию Qutepart и Enki на его основе, потому что решил, что текущая версия уже лучше, чем вариант на QScintilla. Функциональности пока не много. TODO-list большой. Периодически пополняется за счет пожеланий от пользователей и становится меньше за счет сделанных фич.

Источник

Синтаксическая подсветка кода на стороне сервера

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

Ранее я рассказывал о причинах безуспешного поиска готового решения. Плагины для WordPress наряду с использованием библиотеки Highlight.js или Prism в текущем виде имеют свои недостатки. В этой статье я расскажу про установку Highlight.php на сервер и его применению для подсветки кода на WordPress.

Преимущества серверной подсветки синтаксиса:

Highlight.php — это серверная подсветка синтаксиса, написанная на языке PHP, которая в настоящее время поддерживает около 200 языков. Проект размещён на GitHub и является портированной версией Highlight.js полностью поддерживая список языков и стилей исходного проекта на JavaScript.

Установка библиотеки Highlight.php с помощью Composer

Перед началом работы убедитесь, что у вас установлен Composer, который представляет собой систему управления пакетами PHP и будет необходим для установки Highlight.php.

После того как вы убедились, что Composer установлен, вам необходимо подключиться к серверу по SSH-протоколу, например, используя PuTTY в качестве клиента.

Чтобы установить Highlight.php выполните следующую команду:

Команда из первой строки позволяет перейти в каталог с темой WordPress, а команда из второй строки непосредственно устанавливает в этот каталог библиотеку Highlight.php, необходимую нам для подсветки синтаксиса. В результате будет создан каталог vendor и в нём все нужные для работы файлы. На этом установка завершена!

Использование Highlight.php для подсветки кода на WordPress

Далее я разъясню процедуру практического использования Highlight.php на WordPress для синтаксической подсветки кода. На момент написания статьи весь код, который вы видите на этой странице и в целом на блоге, как раз обработан и выведен на экран таким образом.

Добавьте в файл function.php своей темы следующий код:

Функция applySyntaxHighlighting — это самоопределяемая функция, которая ищет код, встроенный в контент статьи на WordPress, и обрабатывает его, определённым образом подсвечивая синтаксис.

Следующие два пункта очень важны и напрямую влияют на работоспособность, пожалуйста, обратите на них внимание:

Таким образом мы реализовали подсветку синтаксиса без использования Javascript и настал черёд перейти к завершающему этапу. Придадим коду красивый внешний вид!

Источник

Подсветка синтаксиса кода для любого сайта. Скрипт SyntaxHighlighter Скрипт SyntaxHighlighter» title=»Подсветка синтаксиса кода для любого сайта.
Скрипт SyntaxHighlighter»/>

Ранее я уже писал о подобном скрипте Highlight.js в статье «Подсветка синтаксиса в примерах кода» который я использую на своем сайте, в этой статье речь пойдет о подсветке синтаксиса кода на SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.

На данной странице я использую именно SyntaxHighlighter для более реальной демонстрации (на остальных страницах блога используется Highlight.js ).

Установка скрипта:

Итак, для начала скачиваем файлы скрипта SyntaxHighlighter к себе на компьютер. Сделать это можно на официальном сайте SyntaxHighlighter, так и нажав на кнопку исходники (версия которую использую я).

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

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

где brush: php отвечает за язык кода, синтаксис которого будет подсвечиваться.

Если выделяемый код будет написан на C++, то вместо brush: php нужно будет написать brush: cpp. При этом в страницы обязательно должен быть подключен файл, отвечающий за подсветку синтаксиса кода соответствующего языка программирования.

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

Для преобразования спецсимволов в HTML-сущности можно воспользоваться любой подходящей программой, например, программой DreamWeaver или NotePad++ (выделить текст и нажать Меню — TextFX — TextFX Convert — Encode HTML (&<>«)). Кроме этого в интернете существует множество разнообразных бесплатных инструментов по обработке кода.

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

В папке /styles/ несколько стилей оформления, на скриншоте изображен стиль shThemeDefault.css

и темный стиль shThemeEmacs.css

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

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

На этом все. Удачи вам и успехов в создании сайтов.

Источник