Impossible de charger la vidéo. Vous pouvez suivre les instructions ci-dessous.
La vidéo présente l’interface en anglais.
Sur ordinateur, ouvrez « Modèles » et choisissez par exemple « Calculatrice ». Le modèle crée un projet distinct. Sur téléphone, commencez dans le fichier index.html existant. Les onglets permettent de passer du HTML au CSS ou au JavaScript.
L’éditeur enregistre vos modifications après une courte pause de saisie. Les projets et les préférences restent dans ce navigateur. L’indicateur d’enregistrement confirme que les dernières modifications sont sauvegardées.
Gardez vos essais CSS à part de votre prochaine page web. Chaque projet possède ses propres fichiers et dossiers. La fenêtre « Projets » permet de passer de l’un à l’autre.
Créez des sous-dossiers et déplacez-y vos fichiers par glisser-déposer. Épinglez l’explorateur de fichiers dans une fenêtre flottante pour garder l’arborescence à côté du code.
Le mode « Vue partagée » permet de modifier un fichier à la fois. « Panneaux empilés » dispose les fichiers du dossier courant les uns sous les autres, et « Fenêtres multiples » les ouvre dans des panneaux séparés. Redimensionnez les panneaux pour donner plus de place au code ou à l’aperçu.
L’aperçu s’actualise après une courte pause de saisie. Ouvrez « Console » pour consulter les messages, avertissements et erreurs JavaScript, ou saisir une commande à exécuter dans l’aperçu.
Choisissez l’apparence « Sombre », « Clair » ou « Système », puis réglez la police et l’indentation. Vous pouvez activer ou désactiver le retour à la ligne, la numérotation et la fermeture automatique des balises ou des parenthèses.
Le projet est enregistré dans IndexedDB, dans ce navigateur, trois secondes après la dernière modification. Les préférences sont enregistrées dès que vous les changez. Avant de fermer la page, attendez le statut « Enregistré ». Le stockage du navigateur peut être effacé ou devenir indisponible. Exportez donc les projets importants en ZIP pour les sauvegarder. L’historique d’annulation et la position du curseur ne sont pas conservés entre les visites.
Oui. Cliquez sur « Projets » dans la barre d’outils pour créer, renommer ou supprimer des projets et passer de l’un à l’autre. Chaque projet conserve ses propres fichiers, dossiers et contenus.
Ouvrez le sélecteur de dossier à gauche de la barre d’outils pour afficher « Dossiers et fichiers ». Le bouton plus à côté d’un dossier ajoute un fichier ou un sous-dossier. Le crayon permet de renommer un élément. Vous pouvez déplacer les fichiers par glisser-déposer et épingler l’explorateur dans une fenêtre flottante.
Dans « Disposition », choisissez « Vue partagée », « Panneaux empilés » ou « Fenêtres multiples ». Le premier mode utilise un éditeur avec des onglets de fichiers. Le deuxième dispose les fichiers du dossier courant les uns sous les autres, et le troisième les ouvre dans des panneaux séparés. Vous pouvez redimensionner, réduire ou agrandir les panneaux. Fermer le panneau d’un fichier demande confirmation et supprime ce fichier.
Vous pouvez créer des fichiers HTML, CSS, JavaScript, JSON, XML, Python, Java, C, C++, PHP et texte brut. La coloration syntaxique est disponible pour les neuf premiers types. PHP et le texte brut n’en bénéficient pas. HTML, CSS et JavaScript proposent aussi l’autocomplétion avec Ctrl+Space.
Non. Vous pouvez modifier ces fichiers avec la coloration syntaxique, mais l’aperçu n’exécute que du HTML, du CSS et du JavaScript. Pour exécuter du Python, du Java, du C ou du C++, utilisez un environnement disposant de l’interpréteur ou du compilateur adapté.
L’éditeur conserve les fichiers du projet dans ce navigateur sans les envoyer à un serveur pour les modifier. L’aperçu exécute toutefois votre code. Les scripts, polices et images externes, ainsi que les requêtes réseau qu’il contient, peuvent contacter d’autres services. N’exécutez que du code fiable.
Commencez avec index.html, style.css et script.js, ou chargez un modèle. Dans le HTML, référencez style.css avec un élément link et script.js avec un élément script. L’aperçu utilise ces références pour charger vos fichiers locaux. Il s’actualise après une courte pause de saisie. Les messages JavaScript apparaissent dans « Console ».
Oui, pour tester du HTML, du CSS et du JavaScript sans compte. Vous disposez d’un aperçu en direct, de fichiers séparés, d’une console, de l’enregistrement local et de l’export ZIP. L’éditeur ne publie toutefois pas de page de projet partageable et ne propose pas de collaboration en temps réel.
CodeMirror 5 assure la coloration syntaxique pour HTML, CSS, JavaScript, JSON, XML, Python, Java, C et C++. Vous pouvez aussi créer des fichiers PHP et texte brut, affichés sans coloration. Cette aide concerne l’édition du code. L’exécution dans l’aperçu se limite au HTML, au CSS et au JavaScript.
Après trois secondes sans modification, l’éditeur écrit les fichiers et l’arborescence dans IndexedDB. Les préférences sont stockées séparément. Le projet mémorise le fichier et le dossier sélectionnés, mais pas l’historique d’annulation ni la position du curseur. La réouverture de cette copie locale dépend de la disponibilité du stockage et de la conservation des données du navigateur.
CodeMirror fournit la numérotation des lignes, l’indentation, la fermeture automatique, le repli de code et la recherche par expressions régulières. La taille de police va de 12 à 24 pixels, et la largeur des tabulations peut être de 2, 4 ou 8 espaces. Choisissez « Sombre », « Clair » ou « Système » pour l’apparence. La dernière option suit les réglages de l’appareil.
Chaque projet contient des fichiers texte et une arborescence virtuelle. L’export crée un ZIP du projet courant en conservant les chemins des dossiers. Pour reprendre du code venant d’ailleurs, créez les fichiers et collez leur contenu. L’import d’archives ZIP n’est pas disponible.
L’aperçu affiche un document HTML dans un iframe soumis à des restrictions de sécurité. Les références aux feuilles de style et scripts locaux sont réécrites en URL de données. Les ressources externes peuvent toujours être chargées sur le réseau. Une modification programme une actualisation après 500 millisecondes. La console reçoit les messages et erreurs de l’aperçu et lui transmet les commandes JavaScript saisies.
« Vue partagée » utilise des onglets dans un seul éditeur. « Panneaux empilés » dispose les éditeurs du dossier courant les uns sous les autres, et « Fenêtres multiples » ouvre des panneaux séparés à côté de l’aperçu. Le choix de disposition est enregistré localement, mais toutes les positions de panneaux et tous les états d’édition ne sont pas restaurés.
