From 5e98593e8cff32499f93a4ffe29020d8db2d184e Mon Sep 17 00:00:00 2001 From: Otmar Onderek <66325539+otmon76@users.noreply.github.com> Date: Mon, 21 Sep 2026 21:08:36 +0200 Subject: [PATCH 1/2] Update article.md --- .../01-mutation-observer/article.md | 25 ++----------------- 1 file changed, 2 insertions(+), 23 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 27b973083..604384612 100644 --- a/2-ui/99-ui-misc/01-mutation-observer/article.md +++ b/2-ui/99-ui-misc/01-mutation-observer/article.md @@ -128,23 +128,13 @@ Takový úryvek v HTML vypadá následovně: ... ``` -<<<<<<< HEAD Pro lepší čitelnost a současně pro zkrášlení budeme na našich stránkách používat JavaScriptovou knihovnu pro zvýraznění syntaxe, např. [Prism.js](https://prismjs.com/). Abychom pro uvedený úryvek kódu zajistili zvýraznění syntaxe touto knihovnou, voláme funkci `Prism.highlightElem(pre)`, která prozkoumá obsah takových elementů `pre` a přidá do nich speciální značky a styly pro barevné zvýraznění syntaxe podobně, jak vidíte v příkladech zde na této stránce. Kdy přesně bychom měli spustit tuto zvýrazňovací metodu? Můžeme to udělat v události `DOMContentLoaded` nebo umístit skript na konec stránky. V té chvíli je náš DOM připraven a my můžeme najít elementy `pre[class*="language"]` a zavolat na nich `Prism.highlightElem`: ```js // zvýrazní všechny úryvky kódu na stránce -document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem); -======= -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. - -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: - -```js -// highlight all code snippets on the page document.querySelectorAll('pre[class*="language"]').forEach(elem => Prism.highlightElement(elem)); ->>>>>>> 20208769e528337949e946f526534d61d38bac47 ``` Dosud je všechno jednoduché, že? Najdeme v HTML kódu úryvky kódu a zvýrazníme je. @@ -156,15 +146,9 @@ let článek = /* stáhneme nový obsah ze serveru */ článekElem.innerHTML = článek; ``` -<<<<<<< HEAD Nový HTML `článek` může obsahovat úryvky kódu. Musíme na ně volat `Prism.highlightElem`, jinak nebudou zvýrazněny. -**Kdy a kde volat `Prism.highlightElem` pro dynamicky načtený článek?** -======= -The new `article` HTML may contain code snippets. We need to call `Prism.highlightElement` on them, otherwise they won't get highlighted. - -**Where and when to call `Prism.highlightElement` for a dynamically loaded article?** ->>>>>>> 20208769e528337949e946f526534d61d38bac47 +**Kdy a kde volat `Prism.highlightElement` pro dynamicky načtený článek?** Můžeme toto volání připojit ke kódu, který načte článek, například takto: @@ -173,13 +157,8 @@ let článek = /* stáhneme nový obsah ze serveru */ článekElem.innerHTML = článek; *!* -<<<<<<< HEAD let úryvky = článekElem.querySelectorAll('pre[class*="language-"]'); -úryvky.forEach(Prism.highlightElem); -======= -let snippets = articleElem.querySelectorAll('pre[class*="language-"]'); -snippets.forEach(elem => Prism.highlightElement(elem)); ->>>>>>> 20208769e528337949e946f526534d61d38bac47 +úryvky.forEach(elem => Prism.highlightElement(elem)); */!* ``` From 42374962f09149dc53f34657db6fa77379963548 Mon Sep 17 00:00:00 2001 From: Otmar Onderek <66325539+otmon76@users.noreply.github.com> Date: Mon, 21 Sep 2026 21:10:19 +0200 Subject: [PATCH 2/2] Update article.md --- 2-ui/99-ui-misc/01-mutation-observer/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 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 604384612..ca87cffc7 100644 --- a/2-ui/99-ui-misc/01-mutation-observer/article.md +++ b/2-ui/99-ui-misc/01-mutation-observer/article.md @@ -128,9 +128,9 @@ Takový úryvek v HTML vypadá následovně: ... ``` -Pro lepší čitelnost a současně pro zkrášlení budeme na našich stránkách používat JavaScriptovou knihovnu pro zvýraznění syntaxe, např. [Prism.js](https://prismjs.com/). Abychom pro uvedený úryvek kódu zajistili zvýraznění syntaxe touto knihovnou, voláme funkci `Prism.highlightElem(pre)`, která prozkoumá obsah takových elementů `pre` a přidá do nich speciální značky a styly pro barevné zvýraznění syntaxe podobně, jak vidíte v příkladech zde na této stránce. +Pro lepší čitelnost a současně pro zkrášlení budeme na našich stránkách používat JavaScriptovou knihovnu pro zvýraznění syntaxe, např. [Prism.js](https://prismjs.com/). Abychom pro uvedený úryvek kódu zajistili zvýraznění syntaxe touto knihovnou, voláme funkci `Prism.highlightElement(pre)`, která prozkoumá obsah takových elementů `pre` a přidá do nich speciální značky a styly pro barevné zvýraznění syntaxe podobně, jak vidíte v příkladech zde na této stránce. -Kdy přesně bychom měli spustit tuto zvýrazňovací metodu? Můžeme to udělat v události `DOMContentLoaded` nebo umístit skript na konec stránky. V té chvíli je náš DOM připraven a my můžeme najít elementy `pre[class*="language"]` a zavolat na nich `Prism.highlightElem`: +Kdy přesně bychom měli spustit tuto zvýrazňovací metodu? Můžeme to udělat v události `DOMContentLoaded` nebo umístit skript na konec stránky. V té chvíli je náš DOM připraven a my můžeme najít elementy `pre[class*="language"]` a zavolat na nich `Prism.highlightElement`: ```js // zvýrazní všechny úryvky kódu na stránce @@ -146,7 +146,7 @@ let článek = /* stáhneme nový obsah ze serveru */ článekElem.innerHTML = článek; ``` -Nový HTML `článek` může obsahovat úryvky kódu. Musíme na ně volat `Prism.highlightElem`, jinak nebudou zvýrazněny. +Nový HTML `článek` může obsahovat úryvky kódu. Musíme na ně volat `Prism.highlightElement`, jinak nebudou zvýrazněny. **Kdy a kde volat `Prism.highlightElement` pro dynamicky načtený článek?**