Aller au contenu

Extension Aperçu HTML

Un aperçu en direct, haute fidélité, du document HTML (et PHP) actif, rendu par un vrai moteur de navigateur (QtWebEngine) dans un panneau ancrable. Contrairement à l'aperçu Markdown, celui-ci rend le CSS, le JavaScript, les polices web et tout le reste exactement comme le ferait un navigateur.

Disponibilité — tous les téléchargements ne l'incluent pas

L'aperçu HTML repose sur QtWebEngine, un moteur de navigateur complet, et il est volumineux en conséquence. Il est donc optionnel, et c'est le téléchargement que vous avez choisi qui détermine sa présence.

  • macOS — OctoEdit est publié en deux paquets : l'un avec l'aperçu HTML, l'autre allégé, sans lui. Choisissez le téléchargement indiqué comme incluant l'aperçu HTML : celui-ci est présent dès le démarrage de l'éditeur. Il n'y a aucun complément à installer ensuite — un paquet dépourvu de l'aperçu ne pourra pas l'acquérir plus tard, téléchargez simplement l'autre paquet.
  • Windows — l'aperçu peut aussi être ajouté après coup à une installation existante, sous la forme d'un téléchargement distinct que vous décompressez dans le dossier où OctoEdit est installé, avant de redémarrer l'éditeur.

Si Affichage ▸ Aperçu HTML n'apparaît pas dans le menu, votre copie n'inclut pas l'aperçu. L'aperçu Markdown ne nécessite aucun moteur de navigateur et reste toujours disponible.

Compilation depuis les sources : l'aperçu dépend de l'option CMake MTE_ENABLE_HTML_PREVIEW — voir BUILDING.md pour les notes d'empaquetage et de licence.

Où la trouver

Affichage ▸ Aperçu HTML ouvre (ou ferme) le panneau d'aperçu pour l'onglet courant.

Comportement

  • Rendu en direct. L'aperçu se rafraîchit pendant la frappe (avec anti-rebond ; le délai s'assouplit pour les très gros fichiers).
  • Haute fidélité. Feuilles de style, scripts, images et autres ressources se chargent relativement au dossier du document, si bien qu'une page s'affiche comme dans un navigateur.
  • Liens vers des dossiers. Cliquer sur un lien qui pointe vers un dossier local charge le document d'index de ce dossier (index.html / index.htm / index.xhtml) au lieu d'un listage de répertoire.
  • Ouvrir dans le navigateur. La barre d'outils ouvre le fichier sur disque (ou, pour les modes serveur PHP ci-dessous, l'URL en direct) dans votre navigateur par défaut.
  • Taille du panneau. L'aperçu conserve une part de la fenêtre plutôt qu'une largeur fixe : il grandit et rétrécit avec elle — voir Disposition enregistrée.

Un clignotement avec le rendu CPU de la fenêtre

L'aperçu amène un moteur de navigateur dans la fenêtre de l'éditeur, et avec Rendu de la fenêtre réglé sur CPU la fenêtre doit être recréée pour lui faire place. La fenêtre de l'éditeur clignote donc une fois — à la première ouverture de l'aperçu HTML dans une session, et plus jamais ensuite. Le défaut, GPU, l'évite complètement ; voir Préférences ▸ Général ▸ Rendu de la fenêtre.

Visibilité de l'aperçu

La visibilité de l'aperçu est mémorisée par fichier, pendant une session comme entre les redémarrages :

  • Les fichiers web (.html, .htm, .xhtml, et .php / .phtml / .php3 / .php4) ouvrent l'aperçu automatiquement la première fois que vous les affichez.
  • Les autres fichiers non — mais vous pouvez ouvrir l'aperçu sur n'importe quel fichier avec Affichage ▸ Aperçu HTML, et il sera rendu comme du HTML.
  • Au sein d'une session, votre choix pour un onglet est restauré quand vous y revenez.
  • Entre les redémarrages, votre choix explicite pour un fichier est mémorisé : une fermeture manuelle reste fermée à la prochaine ouverture de ce fichier, et un aperçu ouvert sur un fichier qui ne s'ouvrirait pas automatiquement se rouvre. Les fichiers jamais touchés explicitement suivent à chaque fois le défaut d'ouverture automatique.

Prévisualiser le PHP

PHP s'exécute côté serveur, QtWebEngine ne peut donc pas l'exécuter directement. Choisissez comment les fichiers .php sont traités sous Préférences ▸ Extensions ▸ Aperçu HTML :

Mode Effet Idéal pour
Désactivé Affiche une page d'instructions ; n'exécute et ne récupère jamais rien. Désactiver l'aperçu PHP.
Exécuter avec PHP (ligne de commande) Passe le document au binaire php local et rend sa sortie. S'exécute sous la SAPI CLI de PHP. Fichiers de gabarits / autonomes qui émettent du HTML.
Exécuter avec PHP (serveur intégré) Sert le document via le serveur web intégré de PHP (php -S), que l'éditeur démarre et arrête pour vous. S'exécute sous la SAPI web. Pages complètes — phpinfo(), $_SERVER, sessions, routage.
Utiliser un serveur que vous gérez (URL) Fait correspondre le fichier ouvert à une URL sur un serveur que vous gérez (Apache, nginx, Docker, php artisan serve, …). Une pile de développement locale existante.

Le chemin de l'exécutable PHP et Mettre à jour automatiquement pendant la saisie s'appliquent aux deux modes ligne de commande et serveur intégré. Laissez le chemin vide pour chercher dans votre PATH et les emplacements d'installation habituels (sur macOS, une application lancée depuis le Finder n'hérite pas du PATH de votre shell ; renseignez donc le chemin complet, p. ex. /opt/homebrew/bin/php).

Ligne de commande ou serveur intégré

Ces deux modes exécutent le même binaire php local, mais dans des environnements (SAPI) différents, ce qui change ce qui fonctionne :

  • Ligne de commande (SAPI CLI). Rapide et simple — il affiche simplement ce que le script imprime. Mais phpinfo() se rend en texte brut, et les fonctionnalités web comme $_SERVER, les sessions et le routage sont limitées ou vides. Parfait pour les fichiers qui émettent surtout du HTML.

  • Serveur intégré (SAPI web). L'éditeur lance un petit php -S 127.0.0.1:<port> enraciné dans le dossier de votre fichier et charge la page via HTTP ; elle se rend donc exactement comme sur un vrai serveur : phpinfo() est une page HTML stylée, $_SERVER est renseigné, les sessions et les requêtes de ressources annexes fonctionnent toutes.

  • Le serveur n'est démarré qu'à la première prévisualisation d'un fichier .php dans ce mode, réutilisé d'un rendu à l'autre, redémarré si vous passez à un fichier d'un autre dossier, et arrêté quand vous fermez l'éditeur ou quittez le mode.

  • Il n'écoute que sur 127.0.0.1, il n'est donc jamais joignable depuis le réseau.
  • Les modifications non enregistrées sont aussi prévisualisées : votre tampon en cours est écrit dans un fichier temporaire dans le dossier du document (pour que __DIR__ et les include/require relatifs se résolvent correctement) et c'est lui qui est servi. Le fichier temporaire est remplacé à chaque rendu et supprimé quand vous quittez ou changez de mode.

Tip

Si une page PHP apparaît comme du texte au lieu d'une page rendue, passez de ligne de commande à serveur intégré — c'est la différence entre SAPI CLI et SAPI web, pas un bogue.

Utiliser un serveur que vous gérez (URL)

Si vous exécutez déjà PHP derrière un serveur web, pointez l'aperçu dessus :

  • URL de base — la racine de votre serveur, p. ex. http://127.0.0.1:8000.
  • Racine de documents — le dossier local servi à cette URL de base. Le fichier ouvert est mis en correspondance avec une URL en dessous. Laissez-la vide pour servir le fichier par son nom depuis l'URL de base. Si le fichier est hors de la racine des documents, l'aperçu le signale afin que vous corrigiez la correspondance.

Quand PHP est introuvable

Dans les modes ligne de commande et serveur intégré, si aucun binaire php ne peut être localisé, l'aperçu affiche une courte erreur expliquant comment définir le chemin ou installer PHP. La page d'instructions du mode Désactivé renvoie aussi vers les téléchargements de PHP et montre comment démarrer un serveur.

Voir aussi