Подсветка кода на сайте WordPress

Содержание

Добавим красивую подсветку кода на сайте WordPress. Предполагается, что код вы оборачиваете тегом <code>здесь_код</code> и хотите оформить его для удобного восприятия пользователями сайта.

Существует популярная JavaScript библиотека Prism, она поддерживает подсветку множества языков программирования. Имеется и официальный плагин для вывода количества строк в коде, его можно добавить при скачивании.

Мой выбор скриптов следующий:

  • Стандартная тема подсветки кода.
  • Языки программирования: HTML, CSS, C, JavaScript, Bash, PHP, Sass.
  • Плагин line-numbers для добавления номеров строк.

Скачать скрипты можно внизу страницы по ссылке:

Markup templating является зависимостью для языка PHP и отмечается автоматически. Установите, или уберите нужные вам галочки.

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

Как подключить Prism к WordPress

  1. Откройте каталог активной темы, создайте папки assets/css/ и assets/js/
  2. Поместите в них скачанные файлы prism.css и prism.js соответственно.
  3. Отредактируйте файл functions.php, он находится в корневом каталоге темы.

Подключение скриптов

/**
 * Enqueue scripts and styles.
 */
function onstartup_scripts() {
	// Styles.
	wp_enqueue_style( 'prism-style', get_template_directory_uri() . '/assets/css/prism.css', array(), '1.24.1' );
	// Scripts.
	wp_enqueue_script( 'prism-script', get_template_directory_uri() . '/assets/js/prism.js', array(), '1.24.1', true );
}
add_action( 'wp_enqueue_scripts', 'onstartup_scripts' );

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

Активация плагина «line-numbers»

Это не WordPress плагин, он относится к библиотеке Prism.

Для отображения номеров строк в блоке кода отредактируйте файл headers.php. Найдите в нём функцию body_class() и установите CSS-класс 'line-numbers'.

Пример:

<body <?php body_class( 'line-numbers' ); ?>>

Обновление страниц при настройке скриптов необходимо производить комбинацией клавиш Ctrl+F5 (для сброса кэша браузера). Не забывайте об этом до завершения всей инструкции.

Как применить подсветку в редакторе Gutenberg

Теперь для подсветки кода необходимо использовать специальные CSS-классы. Допустим, создаёте блок кода, которому присваиваете класс language-* (вместо взёздочки напишите язык, например language-php).

В редакторе Gutenberg это можно сделать выбрав блок кода и справа во вкладке «Дополнительно» ввести «Дополнительные классы CSS»:

Подсветка кода на сайте WordPress
Подсветка кода в редакторе Gutenberg

Подсветка в классическом редакторе WordPress

В классическом редакторе можно использовать подсветку перейдя на вкладку «Текст». Пример кода:

<pre class="language-php"><code>phpinfo()</code></pre>

Хочу как на ONstartup!

Я использую комбинированную версию стилей стандартной темы и тёмной темы «Tomorrow Night», если вам они тоже нравятся, настроить можно следующим образом.

Создание файлов

  1. Создайте в вашей теме каталоги assets/sass/prism/
  2. Перейдите по первой ссылке, загрузите файл CSS (внизу страницы). Переименуйте его в _prism.scss и поместите в созданный каталог prism.
  3. Установите тему «Tomorrow Night» и снова загрузите файл CSS. Переименуйте его в _tomorrow.scss и поместите в ту же папку.

У нас есть два файла стилей, которые мы объединим в один и добавим к ним обёртку из определённых классов. Сами файлы останутся оригинальными для последующего обновления и масштабирования сайта, воспользуемся преимуществами препроцессора SASS.

Компиляция SASS

В каталог assets/sass/ поместите файл prism.scss со следующим содержимым:

/*--------------------------------------------------------------
# Prism Themes
--------------------------------------------------------------*/

// Default Theme.
.prism-theme-light {
	@import "prism/prism";
}

// Tomorrow Night.
.prism-theme-dark {
	@import "prism/tomorrow";
}

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

Всё готово для компиляции, я пользуюсь простой программой «Koala», достаточно перетащить в неё мышкой папку assets/sass/. Приложение объединит файлы, добавит обёртки классов, проставит все необходимые префиксы и сожмёт файл с минимизированную версию.

Вот мои настройки:

Подсветка кода на сайте WordPress
Настройки Koala для компиляции SASS

После нажатия кнопки «compile» должен появиться файл assets/css/prism.css, если ранее этот файл уже был создан, то программа его перезапишет. Стили готовы, приступаем к настройке.

Отредактируйте файл headers.php и обновите функцию body_class(), добавив новый класс prism-theme-light:

<body <?php body_class( 'line-numbers prism-theme-light' ); ?>>

JavaScript

Если установить класс prism-theme-dark, то уже должна отобразиться тёмная тема. За это переключение будет отвечать несложный JavaScript алгоритм. Для этого создайте файл assets/js/prism-theme.js с таким кодом:

/**
 * File prism-theme.js.
 */

( function ( $ ) {
	$( document ).ready( function () {

		// Создание обёртки кода для размещения кнопки.
		$( 'pre[class*="language-"]' ).wrap( '<div class="code-pre-wrap"></div>' );

		// HTML разметка кнопки.
		let markup = '<span class="dashicons dashicons-admin-generic prism-theme"></span>';

		// Создание кнопки.
		let button = $( '.code-pre-wrap' ).append( markup ).children( '.prism-theme' );

		// Событие при клике мышью.
		button.on( 'click', function () {

			// Переключение тем оформления.
			$( 'body' ).toggleClass( 'prism-theme-light prism-theme-dark' );
		} );
	} );
} )( jQuery );

Это минимальная версия без применения Twitter Bootstrap, так как не ко всем темам WordPress он подходит. Если же вам требуются всплывающие подсказки, используйте версию посложнее:

/**
 * File prism-theme.js.
 */

( function ( $ ) {
	$( document ).ready( function () {
		function changeTitle( current ) {
			let title = ( $( 'body' ).hasClass( 'prism-theme-light' ) ) ? 'Тёмная тема' : 'Светлая тема';

			// Перезагрузка всплывающей подсказки.
			current.tooltip( 'dispose' ).attr( 'title', title ).tooltip( 'show' );
		}

		// Создание обёртки кода для размещения кнопки.
		$( 'pre[class*="language-"]' ).wrap( '<div class="code-pre-wrap"></div>' );

		// HTML разметка кнопки.
		let markup = '<span class="dashicons dashicons-admin-generic text-secondary prism-theme"></span>';

		// Создание кнопки.
		let button = $( '.code-pre-wrap' ).append( markup ).children( '.prism-theme' );

		// Событие при наведении мыши.
		button.on( 'mouseenter', function () {
			changeTitle( $( this ) );
		} );

		// Событие при клике мышью.
		button.on( 'click', function () {

			// Переключение тем оформления.
			$( 'body' ).toggleClass( 'prism-theme-light prism-theme-dark' );
			changeTitle( $( this ) );
		} );
	} );
} )( jQuery );

За переключение тем отвечает строка № 32, остальной код создаёт кнопку-шестерёнку и выводит всплывающие подсказки Bootstrap Tooltips. Почитайте как подключить Bootstrap к WordPress через CDN.

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

Подключение скриптов

Обновите функцию подключения скриптов. Теперь она содержит нативную библиотеку векторных иконок WordPress Dashicons и наш новый скрипт переключения тем. Библиотека jQuery подключится автоматически в качестве зависимости.

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

/**
 * Enqueue scripts and styles.
 */
function onstartup_scripts() {
	// Styles.
	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'prism-style', get_template_directory_uri() . '/assets/css/prism.css', array(), '1.24.1' );
	// Scripts.
	wp_enqueue_script( 'prism-script', get_template_directory_uri() . '/assets/js/prism.js', array(), '1.24.1', true );
	wp_enqueue_script( 'prism-theme-script', get_template_directory_uri() . '/assets/js/prism-theme.js', array( 'jquery' ), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'onstartup_scripts' );

Стили CSS

После обновления страницы должна появиться кнопка переключения тем в виде шестерёнки. Чтобы её красиво расположить, добавьте в конец файла style.css эти стили:

.code-pre-wrap {
	position: relative;
}
.code-pre-wrap > .prism-theme {
	position: absolute;
	top: .25rem;
	right: .25rem;
	cursor: pointer;
}
.code-pre-wrap > .dashicons {
	color: #6c757d;
	display: none;
}
.code-pre-wrap:hover > .dashicons {
	display: inline;
}

Рекомендую в каждом файле оставлять последнюю строку пустой для соблюдения стандартов кода.

Надеюсь, что у вас всё получилось, а если возникнут уточнения, то буду рад обсудить их в комментариях!

В блоке кода присутствует ещё кнопка «Скопировать», как её создать посмотрите в статье:

Копирование текста в буфер обмена с разметкой Bootstrap 5 и Tooltips