Как сделать подсветку кода в html
Перейти к содержимому

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

  • автор:

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

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

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

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

  • поддержка популярных языков — HTML, CSS, JavaScript, PHP, C, Python и др.;
  • компактный размер — скрипт занимает всего несколько килобайт;
  • в комплекте идёт около 20 стилевых тем, которые меняются лишь сменой имени файла.

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

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

Выбор языков

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

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

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

Какую версию выбрать зависит исключительно от предпочтений разработчика. В код для добавления подсветки нужно вставить data-language=»html» , где вместо html пишем желаемый язык. Обычно применяется сочетание элементов и .

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML</title> </head> <body> <p>Бифуркация русла</p> </body> </html>

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

  • Самоучитель HTML4
  • Самоучитель CSS
  • Как добавить картинку на веб-страницу?
  • Спецсимволы
  • Структура HTML-кода
  • Введение в HTML
  • Способы добавления стилей на страницу
  • Выравнивание текста
  • Якоря
  • Позиционирование элементов
  • Как добавить иконку сайта в адресную строку браузера?
  • Ссылки

Подсветка синтаксиса для сайта

Если вам необходимо вывести исходный код на странице сайта красиво, с подсветкой синтаксиса и форматированием, то существует множество плагинов. Рассмотрим пример внедрения на плагине Google Code Prettify.

Между тегами . вставим строку подключения плагина:

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

.

, например так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • https://github.com/highlightjs/highlight.js
  • https://highlightjs.org/

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

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

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

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

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

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

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

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

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

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

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

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

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

Файл 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

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

  

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

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

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

  

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

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

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

$html_fixed = preg_replace('#
(.*?)

#usi', '

\1

', $html);

highlight.js — лучшая подсветка синтаксиса кода

Сравним какая подсветка синтаксиса кода лучше. На сегодняшний день мы имеем уже большее количество всяких скриптов которые делают это. Загуглим: code syntax highlighting. и рассмотрим список самых популярных скриптов подсветки синтаксиса:

Зачем тратить на это время. Нам нужно чтобы работало быстро, не нагружало страницу лишними скриптами, и заморачиваться не хочется с внедрением скрипта в сайт. Надо также чтобы отображалось красиво, как в нашем ide, типа PHPStorm или любом другом. Чтобы так, один раз поставил и забыл.

Отлично, я свой выбор сделал и тебе советую: highlight.js

Подсветка кода с помошью скрипта highlight.js

Итак краткая инструкция по установке:

Добавляем в это:

  

Тут мы добавили css, js скрипт и запустили обработку этого скрипта.

Подсветка синтаксиса кода работает. По умолчанию скрипт применяется к такой html конструкции:

class=»html» — это не обязательно, но если хочется, можно написать язык кода, чтобы упростить распознавание скриптом, типа кода.

Тебе надо подсветить код в WordPress и ты ищешь какой-то вордпрессовский плагин? Не советую мусорить в Вордпрессе дополнительными плагинами. Просто добавь highlight.js в head и не заморачивайся. А вот тебе сразу инструкция: Как правильно добавлять скрипты в WordPress.

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

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

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

  • Отцентровать popup с помощью css
  • Как привязать футер к низу страницы
  • Настройка PhpStorm pug (jade) и less Watchers
  • Текст в одну строку и троеточие в конце CSS
  • Height 100vh for mobile browsers iPhone and Android

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

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