Подсветка кода на сайте WordPress
Время прочтения: 6 мин.
181

Содержание

    Обсудить на форуме

    Добавим красивую подсветку кода на сайте 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

    Обсудить на форуме