25.04.2025 – Pavel Klavík, Kamila Klavíková
V OrgPadu jsme vylepšili vkládání kódu do buněk, jak uvnitř řádku, tak i jako samostatný blok. Podporujeme zvýrazňování 40 různých programovacích jazyků, od těch nejpopulárnějších až po specializované jazyky používané v matematice a vědách. Stávající kód jsme převedli do nového formátu a tam, kde to bylo možné, jsme přidali automatickou detekci jazyka.
#vylepšení, #změny, #programování, #OrgPad, #kód, #programovací jazyky
V editoru naleznete vložení kódu pod zeleným pluskem. Kód uvnitř řádku vložíte klávesovou zkratkou CTRL+D (CMD+D na MacOS), například double pi = 3.141592653589793;. Delší kód je užitečné umístit na samostatný odstavec jako tzv. blokový kód. Ten se vloží pomocí SHIFT+CTRL+D (SHIFT+CMD+D na MacOS). Například:
-- Find employees with above-average salary
SELECT name, salary
FROM employees
WHERE salary > (SELECT AVG(salary) FROM employees);Mezi řádkovým a blokovým režimem můžete přepínat tlačítkem v panelu. Pokud uvnitř řádkového kódu stisknete ENTER, převede se na blokový kód.
Aby kód v textu více vynikl, je podbarvený šedě. Zmenšili jsme také velikost písma, aby se lépe hodil do okolního textu. U blokového kódu je nově možné napsat až 120 znaků na jeden řádek, aniž by se objevil horizontální posuvník.
Po najetí na blokový kód se objeví v pravém horním rohu tlačítko pro jeho zkopírování. Můžete si to přímo tady vyzkoušet. Kopírování kódu je užitečné při vytváření tutoriálů na programování nebo pro přípravu příkazů, které potřebujete občas spustit. Například si můžeme připravit následující příkazy pro vytvoření a spuštění nové aplikace v Reactu:
npx create-react-app my-app
cd my-app
npm startPro kód je možné zvolit programovací jazyk, podle kterého se provede automatické zvýraznění syntaxe. V tuto chvíli v OrgPadu podporujeme 40 různých programovacích jazyků. Zvýrazňování děláme knihovnou HighlightJS. Podporujeme od nejpopulárnějších jazyků i po ty méně rozšířené, například různé funkcionální a konfigurační jazyky. Dokonce jsme přidali zvýrazňování pro specializované jazyky jako Lean, Modelica a LaTeX, které se používají v matematice a vědě.
Assembly
Bash
C#
C# HTML
C/C++
CSS
Clojure
Dart
Dockerfile
Elixir
Excel
F#
Go
HTML/XML
Haskell
JSON
Java
JavaScript
Kotlin
LaTeX
Lean
Lisp
Lua
MATLAB
Modelica
OCaml
PHP
Perl
Powershell
Prolog
Python
R
Ruby
Rust
SQL
Scala
Swift
TypeScript
Visual Basic
YAML
Chybí vám nějaký programovací jazyk, který používáte? Napište nám, můžeme ho přidat.
Při kliknutí na kód se zvolený jazyk zobrazí v panelu pod editorem. Nově vytvořený kód nemá žádný zvolený jazyk, v tuto chvíli neprovádíme automatickou detekci. Jazyk lze změnit volbou ze seznamu, s pěti nejpoužívanějšími jazyky nahoře. Přednostně jsou zde jazyky použité v editované OrgStránce, sekundárně jazyky z jiných OrgStránek, které vlastníte. V tuto chvíli uvnitř editoru kód nezvýrazňujeme, volba jazyka se projeví až po jeho zavření. Toto bychom chtěli vylepšit do budoucna.
Abychom nemuseli používat myš, celou volbu jazyka lze provést z klávesnice. Stačí stisknout CTRL+D (CMD+D na MacOS), což otevře seznam jazyků. Následně napíšeme prvních několik znaků z názvu a stiskneme ENTER. Kurzor se vrátí zpět do kódu a můžeme pokračovat ve psaní. Aby byla volba nejpoužívanějších jazyků ještě rychlejší, nachází se vedle seznamu jazyků ikony pro tři nejpoužívanější jazyky. Ty je možné ihned zvolit stiskem kláves F2, F3 a F4.
Pokud označíme v editoru více kódů naráz, je možné hromadně přepnout jazyk. Podobně při označení více buněk s kódem lze změnit jazyk jako hromadnou úpravu.
Barvy zvýrazňování jsme zvolili tak, aby byly od sebe odlišitelné, ale zároveň moc nerušili. Podobným způsobem je vybudovaná celá paleta v OrgPadu, kdy žádná z barev není výraznější než ty ostatní. Navíc jsme se snažili, aby byly barvy konzistentní napříč jazyky. Takže například komentáře jsou šedé nebo řetězce jsou zelené. Můžete se podívat na nějaké příklady zvýraznění pro různé jazyky:
Když jsme zvýrazňování testovali, vyrobili jsme tuto OrgStránku s příklady všech podporovaných jazyků. Tyto příklady jsme si nechali vygenerovat pomocí ChatGPT s tím, aby pokryl různé druhy syntaxe. Pokud se chcete podívat, můžete si ji projít. Protože však obsahuje 641 buněk, může značně vytížit váš počítač.
Také jsme vylepšili práci s kódem v editoru. Úroveň odsazení je tvořena dvěma mezerami, které vložíte klávesou TAB. Naopak BACKSPACE na odsazení smaže rovnou dvě mezery. A klávesa ENTER vytvoří nový řádek se stejným odsazením.
V kódu je také možné použít základní formátování: tučný text, kurzíva, přeškrtnutí, horní a dolní indexy a zvýrazňování. To je skvělé, pokud chcete v kódu něco zdůraznit, například pro účely výukového materiálu. A lze vložit odkazy a obrázky, což je skvělé pro psaní dokumentace.
Autodetekujeme vložené odkazy, ale jsme mnohem přísnější než v běžném textu. Proto vyžadujeme, aby odkaz buď začínal protokolem (http://, https:// nebo ftp://) nebo měl www. na začátku. Například v následujícím kódu nejsou tldCounts.com a tldCounts.net správně autodetekovány jako odkazy:
// “com” and “net” are just property names here
const tldCounts = { com: 120, net: 45 };
console.log(tldCounts.com, tldCounts.net);Uvnitř kódových bloků je také možné používat matematiku. To oceníte zejména při komentování matematických funkcí a výpočtů. Například kód počítající délku vstupního vektoru můžeme okomentovat čitelným matematickým vzorcem. Při kopírování do schránky se matematické vzorce nahradí LaTeXovým kódem.
Vylepšili jsme také, jak se kód zpracuje při vložení ze schránky nebo natažení obsahu. Pokud je ve vstupním HTML nebo Markdownu informace o použitém jazyku, kód se automaticky zvýrazní. Například při kopírování z ChatGPT zachováme informaci o jazyku. Také děláme úpravy, aby se korektně vkládal kód z GitLabu. Odstranili jsme spoustu předchozích chyb. A pokud do řádkového kódu vložíte kód s více řádky, automaticky se převede na blokový kód.
Zároveň jsme prošli existující kód v OrgPadu a převedli ho do nového formátu. V některých starších buňkách bylo místo kódu použité neproporcionální písmo, protože takto se vytvářel kód ve staré verzi editoru. V OrgPadu se nacházelo zhruba deset tisíc unikátních kódů.
Tak velkou klasifikaci je prakticky nemožné udělat ručně. Naštěstí nám v tom dokázala pomoci umělá inteligence. Protože je klíčové, abychom vaše data s nikým nesdíleli, spustili jsme lokální open-source LLM model (konkrétně Qwen 2.5 14B) na našem Macbook Pro s čipem M1 Pro. Počítač se při klasifikaci docela zapotil, ale získali jsme hrubé rozdělení na programovací jazyky.
Následně jsme nad touto klasifikací seděli několik dní a prováděli různé interaktivní programování pomocí Clojure REPLu. Při tom maximálně dbáme na soukromí vašich dat, cílem bylo pouze opravit detekovaný programovací jazyk.
Také nám průběžně rostl seznam podporovaných programovacích jazyků. Například v OrgPadu bylo dost vložených kódu v Excelu. Zajímavé je, že žádný kód v Pascalu v OrgPadu není. Ještě když jsem studoval, byl Pascal jeden z výukových jazyků, který se používal na školách. Dnes je zřejmě zcela nahrazen Pythonem, JS a dalšími novějšími jazyky.
Ke konci dubna 2025 se v OrgPadu nachází přes 66 tisíc kódů, z toho zhruba 14 tisíc nemá zvolený jazyk. Takto vypadá distribuce nejpoužívanějších programovacích jazyků:
| Jazyk | Počet použití | Zastoupení | |
|---|---|---|---|
| 1. | Python | 25 134 | 48.69 % |
| 2. | Bash | 19 103 | 37.01 % |
| 3. | Java | 1 186 | 2.30 % |
| 4. | Clojure | 1 054 | 2.04 % |
| 5. | C# | 809 | 1.57 % |
| 6. | HTML/XML | 566 | 1.10 % |
| 7. | SQL | 528 | 1.02 % |
| 8. | JavaScript | 483 | 0.94 % |
| 9. | C/C++ | 394 | 0.76 % |
| 10. | CSS | 294 | 0.57 % |
Dominance Pythonu a Bashe je způsobená skvělou mapou o Pythonu, kterou vytvořila Thu Vu pro své Youtube video How I Would Learn Python FAST (if I could start over). Video je skvělé a plně se shoduji, že pokud se chcete naučit programovat, dosáhnete toho prací na reálných projektech. Sám jsme se vše o programování naučil tímto způsobem, ostatně OrgPad je první webová aplikace, kterou jsem vytvořil. Když jsem na něm před 6 lety začal pracovat, věděl jsem o fungování webu a prohlížečů naprosté minimum. Tím, že jsem čelil reálným problémům, jsem postupně prohloubil své znalosti. Protože je tato mapa skvělý studijní materiál o Pythonu, stovky lidí si vytvořili její kopii pro osobní potřebu, což masivně zvýšilo počet kódů v Pythonu a Bashi. Ale tyto dva jazyky by byly dominantní i bez této mapy.
Čtvrtým nejpoužívanějším jazykem je v tuto chvíli Clojure. Pokud jste o něm zatím neslyšeli, je to skvělý programovací jazyk. Celý OrgPad je vytvořený v Clojure a dokonce jsem před časem vytvořil interaktivní tutoriál na Clojure přímo v OrgPadu. Jeho benefity popisuji ve svém videu o vývoji webových aplikací. Protože OrgPad využíváme na plánování jeho vývoje, celá řada Clojure kódu se nachází v našich OrgStránkách. OrgPad však používají i další Clojure vývojáři. Typicky se jedná o zkušené seniorní programátory, kteří vidí ve vizualizaci a svobodě OrgPadu možnost, jak zjednodušit řešení svých složitých problémů.
