zaLinux.ru

Автоматическая подсветка кода на веб-сайте


Автоматическая разметка кода на сайте

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

Показанный вариант подходит как для сайтов на WordPress, так и для любых других сайтов.

Примечание: если вы хотите добавить подсветку синтаксиса на сайт WordPress, то, возможно, вам стоит начать с плагинов WordPress.

Подсвечиваться будет любой исходный код, который находится внутри тегов:

<pre><code>
КОД
</code></pre>

Напомню, что HTML-тэг PRE сохраняет форматирование текста, помещённого внутри этого тэга. В первую очередь, имеются ввиду пробелы и отступы, которые значительно улучшают читаемость исходного кода программ. Поэтому, обычно, при оформлении статей исходный код помещают в тег PRE.

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

Забегаю вперёд скажу, что если исходный код на вашем сайте помещён в тэг PRE без использования тэга CODE, то рассмотренный в данной заметке метод подсветки исходного кода всё равно может быть применим, хотя перед этим и требуется дополнительное действие по обработке HTML. Это тоже будет рассмотрено в данной статье.

Что использовать для подсветки кода на сайте

Имеется много различных вариантов, в этой статье будет рассмотрен HighlightJS.

HighlightJS предназначен для подсветки синтаксиса исходного кода на сайтах во всех блоках PRE, написан на JavaScript с автоматическим определением языка и нулевыми зависимостями.

HighlightJS очень легко добавить на веб-сайт, при этом не требуется дополнительная настройка блоков исходного кода.

HighlightJS поддерживает 192 языка программирования.

Имеется 248 тем оформления исходного кода, то есть вариантов подсветки синтаксиса кода.

Вот пример HTML-файла до и после использования Highlight.JS:

Официальные сайты Highlight.JS:

Быстрый старт с HighlightJS

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

  • highlight.min.js
  • default.min.css

Файл highlight.min.js вы можете скачать на этой странице: https://github.com/highlightjs/cdn-release/tree/main/build

А файл default.min.css вы найдёте на этой странице: https://github.com/highlightjs/cdn-release/tree/main/build/styles

Интегрируйте эти файлы в страницы вашего веб-сайта внутри HTML-тэга HEAD. К примеру, в корневой папке сайта я создал директорию highlightjs и поместил туда оба этих файла, тогда для интеграции файлов в сайт используется следующий код:

<link rel="stylesheet" href="/highlightjs/default.min.css">
<script src="/highlightjs/highlight.min.js"></script>

Также внутри HTML-тэга HEAD добавьте следующую строку:


<script>hljs.highlightAll();</script>

Всё готово! Теперь автоматическая подсветка синтаксиса исходного кода будет работать для любого кода внутри тэгов:

<pre><code>
КОД
</code></pre>

Как пользоваться HighlightJS для подсветки кода на сайте

Рассмотрим более продвинутые случаи использования HighlightJS.

Ручная разметка кода

Если автоматическое определения языка для вас не работает или вы хотите вручную указать язык программирования по другим причинам, то вы можете сделать это с помощью атрибута class:

<pre><code class="language-html">...</code></pre>

Язык программирования нужно указать вместо XXX в class="language-XXX". Этот атрибут можно применять для тэгов PRE и CODE:

<code class="language-php">...</code>

<pre class="language-css"><code>...</code></pre>

Исключение блоков из подсветки синтаксиса

Чтобы применить стиль Highlight.js к обычному тексту, фактически не выделяя его, в качестве языка укажите «plaintext»:


<pre><code class="language-plaintext">...</code></pre>

Чтобы полностью пропустить подсветку блока кода, используйте класс nohighlight:

<pre><code class="nohighlight">...</code></pre>

Выбор темы оформления подсветки кода

Файл default.min.css определяет внешний вид блоков с подсвеченным исходным кодом. Дефолтная тема мне показалась не очень выразительной и не контрастной, по крайней мере для языка HTML.

На странице https://github.com/highlightjs/cdn-release/tree/main/build/styles вы можете выбрать любой другой файл вида *min.css, каждый из которых представляет собой отдельную тему оформления.

На странице https://highlightjs.org/demo вы можете переключать темы оформления.


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

Уменьшение размера файла highlight.min.js за счёт выбора только нужных языков

В файл highlight.min.js собрана поддержка многих языков программирования. Если вы хотите получить файл *min.js для одного определённого языка программирования или для нескольких отобранных вами языков программирования, то перейдите на страницу https://highlightjs.org/download/

Здесь вы можете отметить языки программирования, которые вас интересуют.

В скаченном архиве вы найдёте файлы *min.js для каждого выбранного языка программирования в папке «languages».

В корневой папке архива присутствует файл highlight.min.js, в нём объединены все выбранные вами языки.

Поддержка редких языков программирования и разметок в highlight.min.js. Почему нужный мне язык программирования не поддерживается в highlight.min.js

По умолчанию в highlight.min.js включена поддержка только самых популярных языков программирования. Если нужный вам язык программирования или разметки отсутствует, то перейдите на страницу https://highlightjs.org/download/ и скачайте вашу версию highlight.min.js с нужными вам языками.

Нумерация строк исходного кода

По словам разработчика, по умолчанию Highlight.js только определяет язык и устанавливает цвета разметки и не имеет таких параметров, как номера строк или кнопки копирования.

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

Для добавления нумерации необходимо встроить дополнительный файл highlightjs-line-numbers.js

<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@latest/dist/highlightjs-line-numbers.min.js"></script>

Затем вызовите функцию hljs.initLineNumbersOnLoad() сразу после hljs.highlightAll()

<script>
	hljs.highlightAll();
	hljs.initLineNumbersOnLoad();
</script>

Добавление кнопки копирования кода

Адрес официального сайта: https://github.com/arronhunt/highlightjs-copy

Как и в случае с номерами строк, вам необходимо встроить файлы JS и CSS, чтобы настроить кнопку копирования.

<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css" />

В отличие от номеров строк, вы должны установить функцию hljs.addPlugin(new CopyButtonPlugin()) перед hljs.highlightAll()

<script>
	hljs.addPlugin(new CopyButtonPlugin());
	hljs.initLineNumbersOnLoad();
</script>

Что делать, если исходный код на сайте помещён в HTML-тэги PRE без тэга CODE?

Вы можете использовать поиск и замену по регулярным выражениям, чтобы всё содержимое тэгов PRE дополнительно получило тэг CODE.

К примеру, если ваш сайт написан на PHP, то следующая строка кода в качестве входных данных примет содержимое переменной $html и добавит тэг CODE во все тэги PRE. Полученная строка будет сохранена в переменную $html_fixed:

$html_fixed = preg_replace('#<pre>(.*?)</pre>#usi', '<pre><code>\1</code></pre>', $html);

Рекомендуемые статьи:

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *