Aperçus et images

Voir ce que vous écrivez : Markdown, pages web, SVG, images.

Afficher l’aperçu

• Ctrl+Maj+V (ou Affichage › Aperçu) affiche à droite de l’éditeur l’aperçu du fichier ouvert : Markdown, page web (HTML ou PHP), SVG. Le même raccourci le cache.
• Régler la largeur : tirez la barre entre le code et l’aperçu (double-clic : largeur par défaut).
• Détacher : le bouton en haut de l’aperçu (ou Affichage › « Détacher l’aperçu dans une fenêtre ») l’ouvre dans sa propre fenêtre, sur votre deuxième écran s’il y en a un : un écran pour coder, l’autre pour voir. Fermer cette fenêtre remet l’aperçu dans l’éditeur.

Aperçu Markdown

• Il comprend toute la syntaxe courante : titres, listes imbriquées, cases à cocher, tableaux, citations, alertes, sections repliables, notes de bas de page, HTML de base, formules LaTeX, diagrammes Mermaid, emojis, sommaire automatique, coloration des blocs de code. Voir l’aide-mémoire Markdown.
• Images : celles d’internet s’affichent ; celles de votre dossier aussi (![](./images/photo.png), chemin relatif au fichier). Un réglage permet de ne pas charger les images distantes.
• Liens : un lien vers une section (#titre) défile jusqu’au titre ; un lien vers un fichier voisin (./autre.md) l’ouvre dans Scriptorium ; un lien web s’ouvre dans votre navigateur.
• Le texte est interprété sans exécuter de code : le HTML est filtré (pas de script, de cadre ni de formulaire).

Aperçu des pages web (HTML, PHP) avec leurs CSS

• Ouvrez un dossier de site, puis un fichier .html ou .php et affichez l’aperçu : la page apparaît telle qu’un navigateur la montrerait, avec ses CSS, images et scripts retrouvés dans le dossier.
• Les CSS sont retrouvés même si les chemins ne collent pas : chemin exact d’abord, puis le dossier de la page et ses parents (utile pour /css/style.css écrit depuis la racine du site), puis un fichier du même nom s’il est unique dans le projet.
• En direct : la page se met à jour pendant que vous tapez, sans enregistrer. Un changement de CSS s’applique sans recharger la page.
• Depuis un fichier CSS ou JS : l’aperçu affiche la page du projet qui l’utilise.
• PHP : les fichiers .php sont exécutés avec le PHP de ServBay (ou celui indiqué par la variable SCRIPTORIUM_PHP). Enregistrez le fichier pour voir le résultat.
• Sélecteur de CSS : le bouton « CSS » en haut de l’aperçu liste tous les fichiers CSS du projet (ceux utilisés par la page sont repérés). Cochez ou décochez pour les essayer sur la page, sans toucher à vos fichiers. Les fichiers de thème (theme-*.css) s’excluent entre eux : choisir theme-ostavae.css remplace le thème en cours et met à jour data-theme. « Réinitialiser » remet la page comme le site la fabrique.
• Sites PHP complets : vous pouvez ouvrir un dossier parent (par exemple celui qui contient tous vos sites) : Scriptorium repère la racine du site (le dossier avec .htaccess, .env, composer.json ou package.json) et s’en sert comme racine web. Les redirections, les sessions (connexion) et les en-têtes qui interdisent normalement l’affichage dans un cadre sont gérés pour l’aperçu.
• Téléphone, tablette, portable : le menu en haut de l’aperçu choisit l’appareil (Adaptatif, Téléphone 390×844, Tablette 820×1180, Portable, Bureau) ; le bouton ⟲ le fait pivoter ; la page se met à l’échelle pour tenir dans le panneau. La largeur déclenche les media queries comme sur un vrai appareil.
• Les boutons ↻ (recharger) et ↗ (ouvrir dans votre navigateur) sont à droite. La page n’est visible que sur votre PC, et les fichiers sensibles (.env, .sql, clés…) ne sont jamais servis.

Aperçu SVG

• Dans un fichier .svg ouvert comme texte, l’aperçu montre le dessin en direct. Et un clic sur un SVG dans l’explorateur l’ouvre comme image (bouton « Ouvrir comme texte » pour voir le code).

Ouvrir les images

• PNG, JPG, GIF, WebP, BMP, ICO, AVIF et SVG s’ouvrent dans un onglet (explorateur, glisser-déposer, Fichier › Ouvrir).
• Zoom : boutons − et +, ou Ctrl+molette ; « Ajuster » pour tenir dans la fenêtre ; « 1:1 » pour la taille réelle. Fond : damier (pour voir la transparence), sombre ou clair. La taille de l’image et son poids s’affichent à droite.
• Si l’image est modifiée ailleurs, elle se recharge toute seule.