Блок Gutenberg. Подсветка кода.

Скачать архив

Более менее научившись «копипастить» с умом, можно создать блок и с более практическим применением. Допустим, подсветку кода. Она и раньше была немного проблемной и новый редактор ее совсем не решает. Опять те же стандартные теги, которые не намного удобней читаемы, чем простой текст.
Конечно, блок делается не с нуля – это ясно. Кирпичики для строительства нужно поискать в интернете. Их полно. Подсветка в минимальном варианте это скрипт подсветки и выбор языка. Писать все это с нуля не вариант. Что же, опять придется нарушить немного авторские права. Но попробуем не нарушать, а вполне законно позаимствовать некоторые решения.

Мир не без добрых людей. Ищем плагин с подобным функционалом. Сужаем круг поиска, выбирая наиболее понятный и не слишком навороченный. Выкинуть лишний код или изъять из кода лишнее – тоже не всегда легко.
Я остановился на Code Syntax Highlighting Block, который меня полностью устроил. Блок использует библиотеку подсветки PrismJS.

Вполне рейтинговая и простая в использовании библиотека. И «комбик» выбора языка подсветки в плагине имеется.. То есть, то, что и надо.
Немного пробегусь по коду, как обычно, не вдаваясь в подробности.
Подсветка кода идет отдельным плагином. Но использует уже имеющийся в редакторе Gutenberg блок «code», просто дополняя его нужными классами.

Файл index.php стандартный. Единственное дополнение, это подключение библиотеки PrismJS, то есть скрипта и стилей.

function whbcode_register_prism () {
  $view_style_path = 'prism/prism.css';
  $prism_js_path   = 'prism/prism.js';
wp_enqueue_script(
'wowa-highlight-prism-js',
plugins_url( $prism_js_path, __FILE__ ),
[], // No dependencies.
filemtime( plugin_dir_path( __FILE__ ) . $prism_js_path ),
true // In footer.
);
wp_enqueue_style(
  'wowa-highlight-prizm-css',
  plugins_url( $view_style_path, __FILE__ ),[],
  filemtime( plugin_dir_path( __FILE__ ) . $view_style_path )
);}
add_action( 'wp_enqueue_scripts', 'whbcode_register_prism' );

Файл скрипта тоже не совсем «страшный». Но некоторые моменты я не совсем понял. Хотя вроде, как и все правильно добавил нужное и удалил ненужное, раз он все-таки заработал.

const { addFilter } = wp.hooks;
const  el = wp.element.createElement;
const { PlainText, InspectorControls } = wp.editor;
const { SelectControl } = wp.components;

Первая строка – это по моему разумению, добавляется фильтр, для изменения стандартного блока. Я все так и оставил, но в случае проблем, легче было бы написать новый блок. Надо потренироваться на изменении готовых блоков. Хотя бы ту же «цитату» изменить.
Далее все ясно. Конструктор элементов, поле ввода кода, и поле выбора языка.

let langs = {css: "CSS", markup: "Markup", javascript: "JavaScript", php: "PHP" };

Это массив для заполнения «select» разметки языка подсветки. Дело в том, что в оригинале, плагин брал эти языки из скрипта. Там их не один десяток. Поэтому были взяты языки, которые нужны мне и жестко прописаны.
Естественно, при скачивании библиотеки можно выбрать, какие и сколько языков нужно. Мне достаточно четырех языков. Так удобней, чем копаться п портянке из кучи, постоянно выбирая при этом всего 3-4 .
По большому счету – это главное изменение в коде.

В этом участке кода идет создание и заполнение поля выбора языка

el( InspectorControls, { key: 'controls' },
el( SelectControl, {
label: "Language",
value: attributes.language,
options: [ {
label: 'Select code language',
value: '',}].concat (
Object.keys( langs ).sort().map( ( lang ) => (
{ label: langs[lang], value: lang }) )),
onChange: updateLanguage,} )

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

addFilter(
  'blocks.registerBlockType',
  'whbc/highlight-prism',
  addSyntaxToCodeBlock);

Получилось все довольно просто. Библиотека скрипта легко меняется на любую другую при необходимости. Классы у различных библиотек довольно схожи и различаются лишь мелкими деталями. Заменить их не составит труда.

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

Комментариев - 1


  • wwowa.__

    comment

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