Я решил что сайт слишком уныл, поэтому попросил нарисовать мне всяких животных, которых вы видите
11.07.2014

Простая подсветка кода на сайт

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

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

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

Поэтому я решил написать свою простую подсветку кода в блоках на JavaScript, она будет работать для html, css, php, js.

UPD 05.01.2016: Я разработал плагин для WordPress, который вы можете использовать. Читать подробнее

Что бы скрипту было понятно где какой код, его нужно оборачивать в специальные блоки:

<pre class="php">КОД</pre>
<pre class="html">КОД</pre>
<pre class="css">КОД</pre>
<pre class="js">КОД</pre>

Так же, если это html код (ну или там просто встречаются теги), их нужно преобразовывать в специальные символы. Хотя это вроде и так понятно, иначе теги просто не будут видны, ибо браузер их обработает как теги. UDP: В новой версии скрипта это уже не обязательно, он всё сделает за вас.

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

Код скрипта и пример использования вы можете взять на github.

Пример его работы вы видите на моём блоге.
Хуже всего подсветка реализована для JavaScript, т.к. я мало пишу на нём, для html, css и php более-менее. Со временем буду дорабатывать и выкладывать тут информацию об обновлениях.

UPD 13.07.2014: Теперь скрипт сам заменит html символы < и > на соответствующие им, чтобы их можно было корректно вывести. Предварительная обработка не обязательна.

UPD 20.07.2014: Введена поддержка html кода в PHP блоках, теперь при смешении html и php кода подсвечивается и тот, и другой (в PHP блоках).

UPD 24.07.2014: Исправлен баг, если в блоках с PHP кодом не встречается блоков <?php —КОД— ?>, то весь блок подсвечивается по PHP правилам.

Категория: Разработчику Просмотров: 17888 4 комментария

Комментарии

4 комментария

Slee 13.07.2017 в 16:17

Здравствуйте!
А нумерация строк реализована?

z17 14.07.2017 в 00:06

Здравствуйте!

Нет ещё, но есть в планах добавить нумерацию и добавить поддержку синтаксиса Java.

SleepWalker 07.08.2014 в 22:13

Ого, да ты подрос в js!)

z17 08.08.2014 в 01:58

Спасибо!
Начал изучать по мере надобности.

Добавить комментарий