Верх страницы
Обложка к записи SyntaxHighlighter Evolved в AnyComment
Время для прочтения: 2 мин. 8 сек.

SyntaxHighlighter Evolved в AnyComment

AnyComment — лучший плагин под WordPress для вывода комментариев на вашем сайте, но «из коробки» он не умеет подсветку синтаксиса.

В предыдущей статье, которая была посвещена плагину de:comments, мы выяснили, что SyntaxHighlighter Evolved цепляется за фильтр comment_text для поиска своих шорткодов внутри текста комментария:

add_filter( 'comment_text', array( $this, 'parse_shortcodes_comment' ), 7 );

Данный фильтр не используется в плагине AnyComment, но, судя по его исходнику, есть аналогичный фильтр с названием anycomment/rest/comments/item_for_response, вот за него и цепляемся:

/**
 * Прикрутить SyntaxHighlighter к комментариям
 * на базе плагина AnyComment
 *
 * @param array $data массив с данными о комментарии.
 * @param WP_Comment $comment объект комментария.
 *
 * @return array
 */
function mihdan_add_syntax_highlighter_to_anycomments( $data, $comment ) {
	/** @var SyntaxHighlighter $SyntaxHighlighter */
	global $SyntaxHighlighter;

	$data['content'] = $SyntaxHighlighter->parse_shortcodes_comment( $data['content'] );

	return $data;
}
add_filter( 'anycomment/rest/comments/item_for_response', 'mihdan_add_syntax_highlighter_to_anycomments', 10, 2 );

«Ленивая» загрузка

Если в настройках AnyComment включена опция «Ленивая загрузка«, то шорткоды в теле комментария отработают правильно, а вот код не раскрасится, так как на момент активации подсветки кода комментариев в DOM еще нет.

Добавим немного магии на JavaScript — подождем пока в DOM появится нужный нам элемент и повторно активируем подсветку кода:

/**
 * Ждем пока в DOM появится элемент с указанным селектором
 * и вызовем колбек в момент появления.
 *
 * @param selector
 * @param callback
 */
function waitForEl( selector, callback ) {
	var poller = setInterval(
		function() {
			var $obj = jQuery( selector );

			if ( ! $obj.size() ) {
				return;
			}

			clearInterval( poller );
			callback( $obj )
		},
		200
	);
}

/**
 * Включаем подсветку синтаксиса после загрузки комментариев.
 */
waitForEl(
	'#anycomment-load-container',
	function ( $obj ) {
		SyntaxHighlighter.highlight();
	}
);

Результат можно наблюдать в комментариях этого сайта.

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Автор: Кобзарёв Михаил

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все.

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

Ведет блог о разработке, дайджест в телеграмме и в ВК.

Комментарии
Следующая запись