Automatické ukládání v prohlížeči
Když na chvíli přestanete psát, editor uloží změny. Projekty i nastavení zůstávají v tomto prohlížeči. Stav ukládání ukazuje, zda už jsou poslední změny uložené.
Související nástroje
Jak používat editor kódu
Video se nepodařilo načíst. Můžete postupovat podle návodu níže.
Video ukazuje anglické rozhraní.
Na počítači otevřete „Šablony“ a vyberte například „Kalkulačka“. Šablona vytvoří samostatný projekt. Na telefonu začněte v souboru index.html. Mezi HTML, CSS a JavaScriptem přepínejte pomocí záložek souborů.
Webový editor pro celý projekt
Samostatné projekty
Pokusy s CSS si nechte odděleně od rozpracované stránky. Každý projekt má vlastní soubory a složky. Přepínat mezi nimi můžete v okně „Projekty“.
Soubory a složky
Vytvářejte vnořené složky a přetahujte do nich soubory. Prohlížeč souborů můžete připnout jako plovoucí okno a mít strukturu projektu vedle kódu.
Zobrazit další (3)Zobrazit méně
Tři rozložení pracovní plochy
V režimu „Rozdělený pohled“ upravujete jeden soubor. Režim „Panely pod sebou“ zobrazí soubory z aktuální složky pod sebou a „Více oken“ je otevře v samostatných panelech. Změnou velikosti panelů uvolníte místo kódu nebo náhledu.
Živý náhled a konzole
Náhled se obnoví, když na chvíli přestanete psát. V panelu „Konzole“ uvidíte výpisy, varování a chyby JavaScriptu. Můžete v něm také zadat příkaz, který se spustí v náhledu.
Nastavení editoru
Zvolte vzhled „Tmavý“, „Světlý“ nebo „Podle systému“ a upravte písmo i odsazení. Zapnout či vypnout můžete zalamování řádků, jejich číslování a automatické uzavírání značek nebo závorek.
Časté otázky
Jak funguje automatické ukládání?
Tři sekundy po poslední úpravě se projekt uloží do IndexedDB v tomto prohlížeči. Nastavení se ukládá při změně. Před zavřením stránky počkejte na stav „Uloženo“. Úložiště prohlížeče se může vymazat nebo přestat být dostupné, proto důležité projekty zálohujte exportem do ZIP. Historie vracení změn ani poloha kurzoru se mezi návštěvami neuchovávají.
Můžu pracovat na více projektech?
Ano. Tlačítkem „Projekty“ na liště otevřete okno, kde můžete projekty vytvářet, přepínat, přejmenovávat nebo mazat. Každý projekt má vlastní soubory, strukturu složek a obsah.
Jak uspořádat soubory do složek?
Vlevo na liště otevřete výběr složky a zobrazí se „Složky a soubory“. Tlačítkem plus vedle složky přidáte soubor nebo podsložku, tužkou položku přejmenujete. Soubory lze do složek přetahovat a prohlížeč souborů připnout jako plovoucí okno.
Jaká rozložení jsou k dispozici?
V nabídce „Rozložení“ vyberte „Rozdělený pohled“, „Panely pod sebou“ nebo „Více oken“. První režim používá jeden editor se záložkami souborů. Druhý řadí soubory aktuální složky pod sebe a třetí je otevírá v samostatných panelech. Panely můžete zvětšit, zmenšit, minimalizovat nebo maximalizovat. Zavření panelu souboru vyžaduje potvrzení a daný soubor smaže.
Zobrazit další (5)Zobrazit méně
Které jazyky editor podporuje?
Při vytváření souboru můžete zvolit HTML, CSS, JavaScript, JSON, XML, Python, Javu, C, C++, PHP nebo prostý text. Zvýraznění syntaxe je k dispozici pro prvních devět typů. PHP a prostý text se zobrazují bez něj. Pro HTML, CSS a JavaScript funguje také doplňování kódu přes Ctrl+Space.
Spustím tu Python, Javu nebo C++?
Ne. Tyto soubory můžete upravovat se zvýrazněnou syntaxí, ale náhled spouští pouze HTML, CSS a JavaScript. Ke spuštění Pythonu, Javy, C nebo C++ potřebujete prostředí s příslušným interpretem nebo překladačem.
Zůstává můj kód soukromý?
Editor uchovává soubory projektu v tomto prohlížeči a kvůli úpravám je nikam neodesílá. Náhled ale spouští váš kód. Externí skripty, písma, obrázky nebo síťové požadavky v něm mohou kontaktovat jiné služby. Spouštějte jen kód, kterému důvěřujete.
Jak psát HTML, CSS a JavaScript a zobrazit výsledek?
Začněte soubory index.html, style.css a script.js nebo načtěte šablonu. V HTML odkažte na style.css prvkem link a na script.js prvkem script. Náhled podle těchto odkazů načte místní soubory. Po úpravě se obnoví, jakmile na chvíli přestanete psát. Výstup JavaScriptu najdete v panelu „Konzole“.
Je to bezplatná alternativa ke CodePenu?
Ano, pokud si chcete bez účtu vyzkoušet HTML, CSS a JavaScript. K dispozici je živý náhled, více souborů, konzole, místní ukládání projektů a export do ZIP. Editor ale nezveřejňuje projekt na sdílené adrese ani nenabízí spolupráci v reálném čase.
Technické podrobnosti
Zvýraznění syntaxe
CodeMirror 5 zvýrazňuje syntaxi HTML, CSS, JavaScriptu, JSON, XML, Pythonu, Javy, C a C++. Vytvořit můžete i soubory PHP a prostého textu, které se zobrazí bez zvýraznění. Zvýraznění usnadňuje úpravy kódu. V náhledu lze spouštět pouze HTML, CSS a JavaScript.
Automatické ukládání a uchování dat
Po třísekundové pauze v úpravách editor zapíše soubory i strukturu složek do IndexedDB. Nastavení ukládá odděleně. Součástí uloženého projektu je vybraný soubor a složka, ale ne historie vracení změn ani poloha kurzoru. Možnost znovu otevřít místní kopii závisí na dostupnosti úložiště a na tom, zda data prohlížeče nebyla vymazána.
Zobrazit další (4)Zobrazit méně
Funkce editoru
CodeMirror zajišťuje číslování řádků, odsazení, automatické uzavírání, sbalování kódu a hledání pomocí regulárních výrazů. Velikost písma lze nastavit od 12 do 24 pixelů, odsazení na 2, 4 nebo 8 mezer. Vzhled má volby „Tmavý“, „Světlý“ a „Podle systému“. Poslední přebírá nastavení zařízení.
Soubory a projekty
Každý projekt obsahuje textové soubory a virtuální strukturu složek. Export vytvoří ZIP aktuálního projektu a zachová cesty ke složkám. Kód odjinud přenesete vytvořením souborů a vložením jejich obsahu. Import ZIP archivů není k dispozici.
Živý náhled a konzole
Náhled zobrazuje dokument HTML v izolovaném rámci iframe. Odkazy na místní styly a skripty se přepisují na datové adresy URL. Externí zdroje se mohou dál načítat ze sítě. Úprava naplánuje obnovení za 500 milisekund. Konzole přijímá výpisy a chyby z náhledu a posílá do něj zadané příkazy JavaScriptu.
Rozložení
Režim „Rozdělený pohled“ používá záložky souborů v jednom editoru. „Panely pod sebou“ řadí editory souborů aktuální složky pod sebe a „Více oken“ otevírá samostatné panely vedle náhledu. Volba rozložení se ukládá místně, ale neobnovují se všechny polohy panelů ani všechny stavy úprav.