Eine kurze Diskussion über Atoms Methode zur Implementierung der HTML-Echtzeitvorschau

In diesem Artikel erfahren Sie, wie der Atom-Editor die HTML-Echtzeitvorschau implementiert. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „Atom-Tutorial“

Grundlegende Implementierung:

Tastenkombinationen

Drücken Sie Strg + Umschalt + M Native Vorschau kann sein eingeschaltet. (Ohne CSS-Stile) Ctrl + Shift + M 可以打开原生预览。（不带CSS样式）

插件实现：atom-html-preview

点击File->settings–>install-> 搜索 atom-html-preview ->下载
在编辑框中按 Ctrl + Shift + H 可以打开预览面板（带CSS样式）

已经不需要像之前网上说的要修改快捷键了

插件实现：Dev Live Reload

调用快捷键：CTRL+SHIFT+ALT+R

稍微高级点，浏览器内打开

插件实现：brower-plus

在Atom内打开浏览器

插件实现：atom-live-server

在Atom外打开浏览器

快捷键比较多，可能和默认的有冲突，下一篇文章写快捷键修改。

加入IIS

不懂的可以查看百度百科https://baike.baidu.com/item/iis/99720?fr=aladdin
Atom+IE，实时编辑IIS网站目录下的文件，写完刷新就行。
如果使用Chrome，则可以安装LivePage 插件 ，实现页面自动刷新。

插件实现：livereload

写个gulp 任务跑 livereload插件，需要架成http。
不会Gulp可以入门：https://www.gulpjs.com.cn/

方法还有很多

使用browser-sync
browser-sync start --server -files “<strong>/<em>.html,</em></strong>/.css”

Plug-in-Implementierung: atom-html-preview

Klicken Sie auf Datei->Einstellungen–>Installieren-> Suche atom-html-preview ->Herunterladen
Drücken Sie Strg + Umschalt + H im Bearbeitungsfeld, um das Vorschaufenster zu öffnen (im CSS-Stil) 🎜🎜🎜 Es besteht keine Notwendigkeit, die im Internet erwähnten Tastenkombinationen zu ändern 🎜🎜🎜🎜🎜Plug -in-Implementierung: Dev Live Reload🎜🎜🎜🎜Tastenkombination aufrufen: STRG+UMSCHALT+ALT+R🎜🎜🎜🎜Etwas fortgeschrittener, öffnen Sie es im Browser🎜🎜🎜🎜🎜🎜Plug -in Implementierung: brower-plus🎜🎜 🎜🎜🎜Öffnen Sie den Browser in Atom🎜🎜🎜🎜🎜🎜🎜Plug-in-Implementierung: Atom-Live-Server🎜🎜🎜🎜🎜Öffnen Sie den Browser außerhalb von Atom🎜🎜🎜
Es gibt viele Tastenkombinationen, die zu Konflikten führen können Mit den Standardtasten werde ich die Tastenkombinationen im nächsten Artikel ändern. 🎜🎜🎜🎜Treten Sie IIS bei🎜🎜🎜🎜Wenn Sie es nicht verstehen, können Sie die Baidu-Enzyklopädie https://baike.baidu.com/item/iis/99720?fr=aladdin
Atom + IE überprüfen und bearbeiten Laden Sie das IIS-Website-Verzeichnis in Echtzeit herunter und aktualisieren Sie es einfach nach dem Schreiben.
Wenn Sie Chrome verwenden, können Sie das LivePage-Plug-in installieren, um die Seite automatisch zu aktualisieren. 🎜🎜🎜🎜Plug-In-Implementierung: Livereload🎜🎜🎜🎜Schreiben Sie eine Gulp-Aufgabe, um das Livereload-Plug-In auszuführen, das als http eingerichtet werden muss.
Wenn Sie Gulp noch nicht kennen, können Sie loslegen: https://www.gulpjs.com.cn/🎜🎜🎜🎜Es gibt viele Möglichkeiten 🎜🎜🎜🎜Verwenden Sie die Browsersynchronisierung
browser-sync start - -server -files "🎜/.html,🎜/.css"🎜🎜 Da Sie über die Wahl von Atom nachdenken, sollten Sie dies tun Probieren Sie es bis zum Ende aus und lernen Sie eine bestimmte IDE-Operation. Der Zeitaufwand ist sehr hoch, seien Sie also nicht halbherzig. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Atoms Methode zur Implementierung der HTML-Echtzeitvorschau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!