Skip to content

Commit 725653f

Browse files
authored
Merge pull request #3980 from Violet-Bora-Lee/fix-prism-highlight-element
Fix Prism API name: highlightElem -> highlightElement in MutationObserver article
2 parents 52c1e61 + f7922ed commit 725653f

1 file changed

Lines changed: 6 additions & 6 deletions

File tree

2-ui/99-ui-misc/01-mutation-observer/article.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,13 @@ Such snippet in an HTML markup looks like this:
128128
...
129129
```
130130

131-
For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElem(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
131+
For better readability and at the same time, to beautify it, we'll be using a JavaScript syntax highlighting library on our site, like [Prism.js](https://prismjs.com/). To get syntax highlighting for above snippet in Prism, `Prism.highlightElement(pre)` is called, which examines the contents of such `pre` elements and adds special tags and styles for colored syntax highlighting into those elements, similar to what you see in examples here, on this page.
132132

133-
When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElem` on them:
133+
When exactly should we run that highlighting method? Well, we can do it on `DOMContentLoaded` event, or put the script at the bottom of the page. The moment our DOM is ready, we can search for elements `pre[class*="language"]` and call `Prism.highlightElement` on them:
134134

135135
```js
136136
// highlight all code snippets on the page
137-
document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
137+
document.querySelectorAll('pre[class*="language"]').forEach(elem => Prism.highlightElement(elem));
138138
```
139139

140140
Everything's simple so far, right? We find code snippets in HTML and highlight them.
@@ -146,9 +146,9 @@ let article = /* fetch new content from server */
146146
articleElem.innerHTML = article;
147147
```
148148

149-
The new `article` HTML may contain code snippets. We need to call `Prism.highlightElem` on them, otherwise they won't get highlighted.
149+
The new `article` HTML may contain code snippets. We need to call `Prism.highlightElement` on them, otherwise they won't get highlighted.
150150

151-
**Where and when to call `Prism.highlightElem` for a dynamically loaded article?**
151+
**Where and when to call `Prism.highlightElement` for a dynamically loaded article?**
152152

153153
We could append that call to the code that loads an article, like this:
154154

@@ -158,7 +158,7 @@ articleElem.innerHTML = article;
158158

159159
*!*
160160
let snippets = articleElem.querySelectorAll('pre[class*="language-"]');
161-
snippets.forEach(Prism.highlightElem);
161+
snippets.forEach(elem => Prism.highlightElement(elem));
162162
*/!*
163163
```
164164

0 commit comments

Comments
 (0)