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

Добавил пользователь Владимир З.
Обновлено: 05.10.2024

Как сделать подсветку кода на сайте? На самом деле тут нет нечего сложного достаточно просто выбрать каким плагином для этого воспользоваться.

Highlight.js – Популярный скрипт, поддерживает много языков программирования, может выполняться как на сервере так и у клиента.

SyntaxHighlighter - Тоже можно сказать популярный скрипт для подсветки кода, поддерживает много языков, выполняется у клиента и имеет несколько готовых тем оформления.

Google Code Prettify – плагин от корпорации добра Google как и многие знает много языков и выполняется на стороне клиента, но главная его достоинство это малый вес самого скрипта. Если на сайте используете Фреймворк Bootstrap то мне лучше и легче использовать Google Code Prettify.

Что бы подключить Google Code Prettify на сайт скачиваем необходимые файлы с сайта Google ( или prettify.zip )

Подключаем файл стилей:

В конце страницы, перед закрытием тега Body добавляем клиентские скрипты:

Что бы наши примеры кода теперь подсвечивались добавляем к тегу PRE класс prettyprint

Если необходимо нумеровать строки то необходимо добавить еще класс linenums

Малый вес скрипта влияет на скорость загрузки страницы и в отличии от Syntax Highlighter практически не отъедает ресурсов.

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

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

Установка скрипта для подсветки синтаксиса очень простая и может быть разделена на 2 этапа.

Копирование файлов скрипта на хостинг.
Подключение необходимых файлов на страницах сайта.

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

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

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

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

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

Как реализовать подсветку синтаксиса при помощи SyntaxHighlighter

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

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

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

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

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

После обработки кода и добавления его на страницу у вас должно получиться примерно следующие (на примере подсветки php кода).

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

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

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

Теперь давайте перейдем к заключительной части статьи и рассмотрим код для добавления кнопок подсветки кода в редактор WordPress. Поскольку эта CMS очень популярна, то данный материал многим пригодится.

Код кнопок подсветки синтаксиса для сайтов на WordPress

Код кнопки для подсветки PHP кода

Код кнопки для подсветки JavaScript кода

Код кнопки для подсветки CSS кода

На этом данная статья подошла к концу. Если у вас остались какие-то вопросы по установке и использовании скрипта SyntaxHighlighter, вы всегда можете задать их в комментариях к статье.

Из всех доступных скриптов в Интернете, которые целенаправленно раскрашивают указанные блоки на веб-страницах, довольно много, но вот для себя я выбрал один – highlight, который написал Иван Сагалаев. Всегда знал, что наши программисты умнее индусов.

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

Забыл пояснить, что применение этого скрипта оправдано только на сайта, которые в какой-то мере посвящены информационным технологиям. На сайтах, где основная тема домашний очаг, кулинария или мода, почти 30 Кбайтный скрипт будет точно лишним. Хотя вроде как можно его обучить и раскрашиванию рецептов. :)

Устанавливаем подсветку синтаксиса на сайте

Для того, чтобы наши потуги имели успешный результат нам необходимо выполнить пару шагов:

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

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

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

Серверная подсветка синтаксиса отлично работает даже в тех браузерах или на отдельных страницах, где отключено использование JavaScript, например, на Турбо-страницах Яндекса или страницах, совместимых с технологией ускоренных мобильных страниц AMP, которую продвигает Google.
Даже если ваш сайт несовместим с AMP и не использует Турбо-страницы, вы всё равно можете рассчитывать на более высокую скорость отображения контента, поскольку уменьшится количество загружаемых файлов JavaScripts и CSS.

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

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

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

Если Composer не установлен, то сделайте это в соответствии с руководством и затем следуйте дальнейшим указаниям.

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

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

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

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

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

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

)~Uis' ; return preg_replace_callback($pattern, function ($match) < $highlighter = new Highlighter(); $highlighter->setAutodetectLanguages([ 'html' , 'php' , 'sql' , 'css' , 'js' , 'apache' ]); $input = htmlspecialchars_decode($match[ 0 ]); return $highlighter->highlightAuto($input)->value; >, $text); > add_filter( 'comment_text' , 'applySyntaxHighlighting' , 10 ); add_filter( 'the_content' , 'applySyntaxHighlighting' , 10 );

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

В классическом редакторе или в том случае, если ранее вы использовали плагин для подсветки кода, регулярное выражение в $pattern будет отличаться от приведённого в статье примера и функция не сработает.

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

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

Читайте также: