Praxistipp Open Source

Der Atom-Editor ist eine flexible Lösung für das Programmieren und das Editieren von Webdokumenten. ■ Jörn-Erik Burkert

Atom Editor

TIPP1: Quelltexte formatiert darstellen

Mit dem Editor Atom ( www.atom.io) lassen sich Quelltexte oder HTML-Markup komfortabel bearbeiten. Dabei unterstützt das Tool diese mit farbiger Auszeichnung des Codes (Syntax Highlighting). In der Voreinstellung erkennt Atom die meisten Texte und nimmt die farbigen Hervorhebungen vollautomatisch vor. Diese Option gehört für HTML, JavaScript oder CSS zum Lieferumfang des Editors. Weitere Funktionen lassen sich über zusätzliche Atom-Paket zum Editor hinzufügen.

TIPP2: HTML-Vorschau als Paket installieren

Mit einem Package kann man ein HTML-Dokument fertig wie in einem Browser darstellen. Alle Änderungen am Code zeigt Atom dann in Echtzeit an. Öffnen Sie mit File/Settings die Einstellungen, und klicken Sie im neuen Fenster links in der Liste ganz unten auf die Schaltfläche +Install. In der Suchmaske oben tippen Sie den Begriff atom-html-preview ein. Das Paket wird in der Liste angezeigt. Starten Sie mit dem blauen Install- Knopf das Einspielen des Moduls. Die Daten werden durch den Editor aus dem Internet geladen und das Paket anschließend installiert.

TIPP3: Vorschau interaktiv nutzen

Nach der Installation steht die Vorschau für HTML zur Verfügung. Öffnen Sie ein HTML-Dokument, und gehen Sie in das PackagesMenü. Wählen Sie dort HTML Preview/Enable Preview. Das Fenster wird nun geteilt und die HTML-Vorschau eingeblendet. Alternativ verwenden Sie die Tastenkombination [Strg+Umschalt+H]. Alle Änderungen an den HTML-Auszeichnungen oder dem Inhalt stellt Atom nach dem Speichern der Vorschau in Echtzeit dar. Das gilt auch beim Editieren einer eventuell verwendeten StylesheetDatei. Beim Ändern des Designs in CSS reagiert die Vorschau in Atom auf das Speichern der Datei. Wichtig: Eingebettete Grafiken und andere Elemente müssen für die korrekte Darstellung auf der Festplatte verfügbar sein.

TIPP4: Optionen der Vorschau anpassen

Die Voransicht lässt sich konfigurieren. Gehen Sie zu File/Settings, und wählen Sie links in der Liste Packages. Suchen Sie in der Liste nach dem Paket. Rechts finden Sie die Knöpfe zur Deinstallation, Deaktivierung und für die Einstellungen. Klicken Sie auf Settings. Bei aktivierter Checkbox vor Scroll to Cursor, springt Atom automatisch beim Öffnen der Vorschau in den Bereich der Seite, die gerade bearbeitet wird. Damit werden die Änderungen sofort sichtbar. Mit Trigger on Save deaktivieren Sie die Echtzeitvorschau nach dem Speichern.