Responzivita: Upravit formát code snippets

html-a-css/bem-a-responzivni-design/how-to-responsive.md

@@ -39,15 +39,15 @@ Pro tvorbu flexibilního layoutu pomáhá designérům rozvržení stránky do g
 
 Pružného layoutu, který se přizpůsobí jakékoli velikosti stránek, dosáhneme pomocí relativních jednotek jako jsou procenta, `vw` a `vh`. Díky nim budou elementy na stránce zabírat stejný poměr prostoru nehledě na velikost zařízení. Mřížku např. tří sloupců, které budou na všech zařízeních zabírat 1/3 stránky, tak jednoduše vytvoříme pomocí procent a funkce `calc()`.
 
-```
+```css
 width: calc(100% / 3);
 ```
 
 #### Flexbox
 
 Další nástroj pro tvorbu responzivního layoutu už znáte - je to flexbox. S ním snadno zařídíte např. responzivní galerii obrázků, které se budou zalamovat pod sebe při zmenšení obrazovky. Zásadní je tady vlastnost `flex-wrap`, pomocí které nastavíme automatické zalamování.
 
-```
+```css
 .container {
   display: flex;
   flex-wrap: wrap;

html-a-css/responzivni-design/responsive-theory.md

@@ -32,7 +32,7 @@ Další možností jak přizpůsobit obrázek velikosti kontejneru je použití
 
 U obrázků je také dobré myslet na jejich datový objem, abychom zbytečně nenutili uživatele mobilních zařízení stahovat obrázky o velikosti pro desktop. Nechceme jim vyplýtvat data ani zpomalovat rychlost načítání stránky. V ideálním případě do HTML připravíme různé varianty velikostí.
 
-```
+```html
 <img srcset="large-img.jpg 1024w,
 middle-img.jpg 640w,
 small-img.jpg  320w"
@@ -50,7 +50,7 @@ Jak vidíte, připravit bitmapové obrázky pro responzivní web nemusí být je
 
 Hlavním nástrojem pro tvorbu responzivních stránek jsou media queries. Je to způsob, jak v CSS aplikovat nějaké styly pouze pokud zařízení odpovídá požadovaným parametrům.
 
-```
+```css
 .button-login {
   width: 100%
 }
@@ -67,7 +67,7 @@ Výše uvedený kód můžeme číst jako:
 
 Kromě podmínky se šířkou se můžete často setkat s určením typu média - zda jde o obrazovku nebo tisk.
 
-```
+```css
 @media screen and (min-width: 600px) {
 }