Scrollbary u výpisu kódu

[FilipJirsak]

Poměrně často se stává, že výpis kódu má horizontální scrollbar, což je otravné a ošklivé.

1. V některých případech je zbytečný, je zobrazen veškerý kód a scrollbar je jen kvůli okrajům (např. Document Object Model, Knihovny – Kontrola vstupu, Kontrola DIČ – druhé řešení).
2. Někdy je kód jen o trochu širší a asi by pomohlo dát mu trochu víc prostoru, ať ho nemusíme zbytečně zalamovat (např. Formátování data.
3. Někdy je kód výrazně širší a bude potřeba ho zalomit – to by měl v ideálním případě hlídat Prettier v materiálech (např. poslední kód v Vlastnost innerHTML nebo Obory platnosti a funkce).

Nemám pro to přímo řešení, ale prvním dvěma bodům by mohlo pomoci, pokud by se obsah kódu roztáhnul (skoro) na šířku plochy, kterou zabírá. Tj. text kódu by byl širší, než samotný text lekce – to ale podle mne ničemu nevadí, protože už to šedé pozadí dělá kód opticky širším. Zároveň by bylo dobré, aby byl stejně široký i kód v seznamech (číslovaných či odrážkových – např. zde) – abychom při zalamování kódu nemuseli neustále hlídat, zda jsme uvnitř seznamu nebo mimo (a Prettier by to asi neuměl zkontrolovat).

[FilipChalupa]

Je určitě současný stav problém? Respektive má to lepší řešení?

• Pokud se ubere boční padding, tak kód nebude zarovnaný s ostatním textem.
• Pokud se zruší scrollbar tam, kde kód se sice vejde, ale padding ne, bude to podle mne vypadat divně (na jedné straně jiný padding než na druhé) a ještě to nejde v CSS napsat.
• Pokud vynutíme v Prettieru užší řádky, stejně to nevyřeší užší displaye/zobrazení a bude to víc „rozbíjet“ kód.
• Zalamování řádků na dva a více, které jsou ve skutečnosti ve zdroji jeden, se, hádám, že pro začátečníka, blbě čte, protože je to trochu kouzelné. (I za předpokladu, že by se k výpisu kódu přidaly čísla řádků.)

[FilipJirsak]

Vadí to, když text kódu nebude zarovnaný s ostatním textem? Stejně teď opticky zarovnaný není, protože to tmavé pozadí je výrazné a přesahuje mimo text.

Pokud se zruší scrollbar tam, kde kód se sice vejde, ale padding ne, bude to podle mne vypadat divně (na jedné straně jiný padding než na druhé) a ještě to nejde v CSS napsat. Tohle bych nedělal. Za mne by bylo ideální mít všechny úryvky kódu stejně široké (tedy bez ohledu na to, zda jsou v seznamu nebo mimo něj), a získat pro kód větší prostor, než má teď. A pak na tento širší prostor nastavit Prettier, aby kód musel správně naformátovat jeho autor.

[FilipChalupa]

Možná jsem tě nepochopil, ale myslíš něco takového?

Teď:

Návrh:

[FilipChalupa]

Stejně teď opticky zarovnaný není, protože to tmavé pozadí je výrazné a přesahuje mimo text.

Mně současný stav zarovnaný přijde i přes to tmavé pozadí. 🤷‍♀️

[FilipJirsak]

Možná jsem tě nepochopil, ale myslíš něco takového?

Ano, něco takového. Případně by ten blok kódu mohl přesahovat sloupec s obsahem i doprava, aby to bylo symetrické.

Nemám v rukávu nějaké řešení, jak to udělat, aby to vypadalo lépe. Ale kdyby se na nějaké řešení přišlo, byl bych rád :-)

[FilipChalupa]

Případně by ten blok kódu mohl přesahovat sloupec s obsahem i doprava, aby to bylo symetrické

Jasný. Ten padding jsem upravil nalevo i napravo. Jen to není vidět, protože se kód většinou netrefí přesnou délkou.

[FilipChalupa]

Jinak mně teda současný stav přijde dobrý. Nebo teda nedokáži si představit, jak by to mohlo být lepší. 🤷‍♀️

Někde už jsme se asi i bavili o číslech řádků, ale to je tak asi všechno.

[podlomar]

Já si taky nedokážu představit lepší řešení, takže prozatím zavírám, ať v tom mám porádek.