prismatic highlight.js

Сниппет highlight.js для ленивой загрузки постов

14 марта, 2023
1 минута чтения

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

hljs.highlightAll();

const childList = 'childList';
const target = document.querySelector('#wi-main');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === childList) {
    	mutation.addedNodes.forEach((node) => {
    		if (node.nodeType === Node.ELEMENT_NODE) {
    			node.querySelectorAll('pre code').forEach((el) => hljs.highlightElement(el));
    		}
    	});
    }
  });
});

const config = { attributes: false, [childList]: true, characterData: false };
observer.observe(target, config);

Как видно, сниппет использует возможности DOM Observer. И полностью работает на теме The Fox.

Денис Сергеевич Басковский

Философ, изобретатель и поэт.

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая статья

Заменяем значение TextNode средствами CSS

Следующая статья

Подписываем JSON-LD с помощью Verifiable Credentials