From 298859abb125b28f980e63ba63b996b467585fd8 Mon Sep 17 00:00:00 2001 From: Mikhail Alabugin <137305666+1t1sCooL@users.noreply.github.com> Date: Thu, 6 Aug 2026 17:39:30 +0300 Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D0=B8=D0=BC=D1=8F=20=D0=BC=D0=B5=D1=82=D0=BE?= =?UTF-8?q?=D0=B4=D0=B0=20Prism=20API:=20highlightElem=20->=20highlightEle?= =?UTF-8?q?ment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 2-ui/99-ui-misc/01-mutation-observer/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md index 664144ec97..027c5db248 100644 --- a/2-ui/99-ui-misc/01-mutation-observer/article.md +++ b/2-ui/99-ui-misc/01-mutation-observer/article.md @@ -127,13 +127,13 @@ mutationRecords = [{ ... ``` -Также на нашем сайте мы будем использовать JavaScript-библиотеку для подсветки синтаксиса, например [Prism.js](https://prismjs.com/). Вызов метода `Prism.highlightElem(pre)` ищет такие элементы `pre` и добавляет в них стили и теги, которые в итоге дают цветную подсветку синтаксиса, подобно той, которую вы видите в примерах здесь, на этой странице. +Также на нашем сайте мы будем использовать JavaScript-библиотеку для подсветки синтаксиса, например [Prism.js](https://prismjs.com/). Вызов метода `Prism.highlightElement(pre)` ищет такие элементы `pre` и добавляет в них стили и теги, которые в итоге дают цветную подсветку синтаксиса, подобно той, которую вы видите в примерах здесь, на этой странице. -Когда конкретно нам вызвать этот метод подсветки? Можно по событию `DOMContentLoaded` или просто внизу страницы написать код, который будет искать все `pre[class*="language"]` и вызывать `Prism.highlightElem` для них: +Когда конкретно нам вызвать этот метод подсветки? Можно по событию `DOMContentLoaded` или просто внизу страницы написать код, который будет искать все `pre[class*="language"]` и вызывать `Prism.highlightElement` для них: ```js // выделить все примеры кода на странице -document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem); +document.querySelectorAll('pre[class*="language"]').forEach(elem => Prism.highlightElement(elem)); ``` Пока всё просто, правда? В HTML есть фрагменты кода в `
`, и для них мы включаем подсветку синтаксиса.
@@ -145,9 +145,9 @@ let article = /* получить новую статью с сервера */
 articleElem.innerHTML = article;
 ```
 
-HTML подгружённой статьи `article` может содержать примеры кода. Нам нужно вызвать `Prism.highlightElem` для них, чтобы подсветить синтаксис.
+HTML подгружённой статьи `article` может содержать примеры кода. Нам нужно вызвать `Prism.highlightElement` для них, чтобы подсветить синтаксис.
 
-**Кто и когда должен вызывать `Prism.highlightElem` для динамически загруженной статьи?**
+**Кто и когда должен вызывать `Prism.highlightElement` для динамически загруженной статьи?**
 
 Мы можем добавить этот вызов к коду, который загружает статью, например, так:
 
@@ -157,11 +157,11 @@ articleElem.innerHTML = article;
 
 *!*
 let snippets = articleElem.querySelectorAll('pre[class*="language-"]');
-snippets.forEach(Prism.highlightElem);
+snippets.forEach(elem => Prism.highlightElement(elem));
 */!*
 ```
 
-...Но представьте, что у нас есть много мест в коде, где мы загружаем что-либо: статьи, опросы, посты форума. Нужно ли нам в каждый такой вызов добавлять `Prism.highlightElem`? Получится не очень удобно, да и можно легко забыть сделать это.
+...Но представьте, что у нас есть много мест в коде, где мы загружаем что-либо: статьи, опросы, посты форума. Нужно ли нам в каждый такой вызов добавлять `Prism.highlightElement`? Получится не очень удобно, да и можно легко забыть сделать это.
 
 А что, если содержимое загружается вообще сторонним кодом? Например, у нас есть форум, написанный другим человеком, загружающий содержимое динамически, и нам захотелось добавить к нему выделение синтаксиса. Никто не любит править чужие скрипты.