Добавим красивую подсветку кода на сайте WordPress. Предполагается, что код вы оборачиваете тегом <code>здесь_код</code>
и хотите оформить его для удобного восприятия пользователями сайта.
Существует популярная JavaScript библиотека Prism, она поддерживает подсветку множества языков программирования. Имеется и официальный плагин для вывода количества строк в коде, его можно добавить при скачивании.
Мой выбор скриптов
- Стандартная тема подсветки кода.
- Языки программирования: HTML, CSS, C, JavaScript, Bash, PHP, Sass.
- Плагин line-numbers для добавления номеров строк.
Скачать скрипты можно внизу страницы по ссылке:
Markup templating является зависимостью для языка PHP и отмечается автоматически. Установите, или уберите нужные вам галочки.
На главной странице сайта есть возможность оценить внешний вид темы, нажав на круги в правом сайдбаре.
Как подключить Prism к WordPress
- Откройте каталог активной темы, создайте папки assets/css/ и assets/js/
- Поместите в них скачанные файлы prism.css и prism.js соответственно.
- Отредактируйте файл 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
В классическом редакторе можно использовать подсветку перейдя на вкладку «Текст». Пример кода:
<pre class="language-php"><code>phpinfo()</code></pre>
Хочу как на ONstartup!
Я использую комбинированную версию стилей стандартной темы и тёмной темы «Tomorrow Night», если вам они тоже нравятся, настроить можно следующим образом.
Создание файлов
- Создайте в вашей теме каталоги assets/sass/prism/
- Перейдите по первой ссылке, загрузите файл CSS (внизу страницы). Переименуйте его в _prism.scss и поместите в созданный каталог prism.
- Установите тему «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/. Приложение объединит файлы, добавит обёртки классов, проставит все необходимые префиксы и сожмёт файл с минимизированную версию.
Вот мои настройки:
После нажатия кнопки «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
Всё получилось сделать и темы переключаются. Спасибо! А как можно такие же спокойные цвета сделать красиво как у вас на сайте ? Просто у меня сейчас фон немного желтее и вообще цвета другие. И ещё скажите что значит оставлять пустые строчки в файлах? За ранее спасибо.
Я использую специальные сервисы, где есть возможность сочетать палитры цветов. Мне понравился сайт https://coolors.co
Менять цвета удобнее в файле prism.scss перед компиляцией стилей, приведу пример своего файла:
"И ещё скажите что значит оставлять пустые строчки в файлах?"
Поясняю: текстовый файл должен заканчиваться символом переноса строки (возврата каретки), или проще говоря – оставаться с пустой последней строкой. Ведь мы ведём разработку веб-сайта, а значит используем хостинг, который зачастую управляется операционной системой GNU/Linux. Некоторые программы и редакторы могут выдать предупреждение и даже ошибку, если этого не сделать.