A videó nem tölthető be. Az alábbi útmutatót továbbra is követheted.
A videó az angol felületet mutatja.
Számítógépen nyisd meg a „Sablonok” ablakot, és válaszd például a „Számológép” sablont. A sablon külön projektet hoz létre. Telefonon kezdd a meglévő index.html fájlban. A fájlfülekkel válthatsz a HTML, CSS és JavaScript között.
Ha egy rövid időre abbahagyod a gépelést, a szerkesztő menti a módosításokat. A projektek és a beállítások ebben a böngészőben maradnak. A mentés állapotjelzőjén láthatod, hogy a legutóbbi módosítások már mentve vannak-e.
Tartsd külön a CSS-kísérleteidet a készülő weboldaladtól. Minden projektnek saját fájljai és mappái vannak. A „Projektek” ablakban válthatsz közöttük.
Hozz létre egymásba ágyazott mappákat, és húzd beléjük a fájlokat. A fájlböngészőt lebegő ablakként is rögzítheted, így a projekt szerkezete a kód mellett látható.
A „Osztott nézet” nézetben egyszerre egy fájlt szerkeszthetsz. A „Egymás alatti panelek” nézet az aktuális mappa fájljait egymás alatt, a „Több ablak” pedig külön paneleken jeleníti meg. A panelek átméretezésével több helyet adhatsz a kódnak vagy az előnézetnek.
Az előnézet rövid gépelési szünet után frissül. A „Konzol” panelen megtekintheted a JavaScript üzeneteit, figyelmeztetéseit és hibáit, valamint az előnézetben futtatandó parancsokat is beírhatsz.
Válaszd a „Sötét”, „Világos” vagy „Rendszer” megjelenést, majd állítsd be a betűtípust és a behúzást. A sortördelés, a sorszámok, valamint a tagek és zárójelek automatikus lezárása külön is be- és kikapcsolható.
Az utolsó módosítás után három másodperccel a projekt a böngésző IndexedDB-adatbázisába kerül. A beállítások módosításkor mentődnek. Az oldal bezárása előtt várd meg a „Mentve” állapotot. A böngésző tárhelye törlődhet vagy elérhetetlenné válhat, ezért a fontos projektekről készíts ZIP-mentést. A visszavonási előzmények és a kurzor helye nem őrződik meg a következő látogatásig.
Igen. Az eszköztár „Projektek” gombjával megnyithatod a projektkezelőt, ahol létrehozhatsz, átnevezhetsz és törölhetsz projekteket, illetve válthatsz közöttük. Minden projektnek saját fájljai, mappaszerkezete és tartalma van.
Nyisd meg az eszköztár bal oldalán lévő mappaválasztót a „Mappák és fájlok” megjelenítéséhez. A mappa melletti plusz gombbal fájlt vagy almappát adhatsz hozzá, a ceruzával pedig átnevezheted az elemeket. A fájlokat mappákba húzhatod, a fájlböngészőt pedig lebegő ablakként rögzítheted.
Az „Elrendezés” menüben a „Osztott nézet”, „Egymás alatti panelek” és „Több ablak” nézet közül választhatsz. Az első egyetlen szerkesztőt használ fájlfülekkel. A második az aktuális mappa fájljait egymás alatt, a harmadik külön paneleken jeleníti meg. A panelek átméretezhetők, kis méretűre csukhatók vagy teljes méretűre nyithatók. Egy fájlpanel bezárása megerősítést kér, majd törli az adott fájlt.
Új fájlként HTML, CSS, JavaScript, JSON, XML, Python, Java, C, C++, PHP vagy egyszerű szöveg választható. Az első kilenc típushoz szintaxiskiemelés is elérhető. A PHP és az egyszerű szöveg kiemelés nélkül jelenik meg. HTML, CSS és JavaScript esetén a Ctrl+Space billentyűvel kódkiegészítés is használható.
Nem. Ezeket a fájlokat szintaxiskiemeléssel szerkesztheted, de az előnézet csak HTML-, CSS- és JavaScript-kódot futtat. Python, Java, C vagy C++ futtatásához a megfelelő értelmezőt vagy fordítót tartalmazó környezet szükséges.
A szerkesztő ebben a böngészőben tárolja a projekt fájljait, és szerkesztéshez nem tölti fel őket szerverre. Az előnézet azonban futtatja a kódodat. Az abban szereplő külső szkriptek, betűtípusok, képek vagy hálózati kérések más szolgáltatásokhoz kapcsolódhatnak. Csak megbízható kódot futtass.
Kezdd az index.html, style.css és script.js fájlokkal, vagy tölts be egy sablont. A HTML-ben link elemmel hivatkozz a style.css, script elemmel pedig a script.js fájlra. Az előnézet ezek alapján tölti be a helyi fájlokat. Módosítás után rövid gépelési szünettel frissül. A JavaScript kimenetét a „Konzol” panel mutatja.
Igen, ha fiók nélkül szeretnél HTML-, CSS- és JavaScript-kódot kipróbálni. Élő előnézetet, külön fájlokat, konzolt, helyi projektmentést és ZIP-exportot kapsz. A szerkesztő azonban nem tesz közzé megosztható projektoldalt, és nem kínál valós idejű közös szerkesztést.
A CodeMirror 5 a HTML, CSS, JavaScript, JSON, XML, Python, Java, C és C++ szintaxisát emeli ki. PHP- és egyszerű szövegfájlok is létrehozhatók, de kiemelés nélkül jelennek meg. A kiemelés a szerkesztést segíti. Az előnézetben csak HTML, CSS és JavaScript futtatható.
Három másodperc szerkesztési szünet után a fájlok és a mappaszerkezet az IndexedDB-be kerülnek. A beállítások külön tárolódnak. A mentett projekt tartalmazza a kiválasztott fájlt és mappát, de a visszavonási előzményeket és a kurzor helyét nem. A helyi másolat újranyitásához elérhető böngészőtárhely és megőrzött böngészőadatok szükségesek.
A CodeMirror sorszámokat, behúzást, automatikus lezárást, kódösszecsukást és reguláris kifejezéses keresést biztosít. A betűméret 12 és 24 képpont között, a tabulátor mérete 2, 4 vagy 8 szóközre állítható. A megjelenés lehet „Sötét”, „Világos” vagy „Rendszer”. Az utóbbi az eszköz beállításait követi.
Minden projekt szövegfájlokat és virtuális mappaszerkezetet tartalmaz. Az export az aktuális projektből készít ZIP-fájlt, megőrizve a mappaútvonalakat. Máshonnan származó kód átviteléhez hozd létre a fájlokat, és illeszd be a tartalmukat. ZIP-archívumok nem importálhatók.
Az előnézet korlátozott jogosultságú iframe-ben jeleníti meg a HTML-dokumentumot. A helyi stíluslapokra és szkriptekre mutató hivatkozások adat-URL-ekké alakulnak. A külső erőforrások továbbra is betöltődhetnek a hálózatról. Egy módosítás 500 ezredmásodperc múlva esedékes frissítést ütemez. A konzol fogadja az előnézet üzeneteit és hibáit, a beírt JavaScript-parancsokat pedig visszaküldi neki.
A „Osztott nézet” nézet egyetlen szerkesztőben, füleken jeleníti meg a fájlokat. A „Egymás alatti panelek” az aktuális mappa szerkesztőit egymás alá rendezi, a „Több ablak” pedig külön fájlpaneleket nyit az előnézet mellé. Az elrendezés választása helyben tárolódik, de nem minden panelpozíció és szerkesztési állapot áll vissza.
