A brief discussion on Atom's method of implementing HTML real-time preview

This article will introduce to you how Atom editor implements HTML real-time preview. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "atom tutorial"

Basic implementation:

Shortcut keys

Press Ctrl Shift M in the edit box to open the native preview. (Without CSS style)

Plug-in implementation: atom-html-preview

Click File->settings–>install-> ; Search atom-html-preview ->Download
Press Ctrl Shift H in the edit box to open the preview panel (with CSS style)

No longer necessary It was mentioned online before that the shortcut keys need to be modified

Plug-in implementation: Dev Live Reload

Calling shortcut keys:CTRL SHIFT ALT R

is slightly more advanced, open the

plug-in implementation in the browser: brower-plus

Open the browser in Atom

##Plug-in implementation: atom- live-server

Open the browser outside Atom

There are many shortcut keys, which may conflict with the default ones. , the next article will be about shortcut key modification.

Join IIS

Atom IE, edit the files in the IIS website directory in real time, and just refresh after writing.
If you use Chrome, you can install the LivePage plug-in to automatically refresh the page.

Plug-in implementation: livereload

If you don’t know Gulp, you can get started: https://www.gulpjs.com.cn/

There are many other ways to use

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

Programming Video! !

The above is the detailed content of A brief discussion on Atom's method of implementing HTML real-time preview. For more information, please follow other related articles on the PHP Chinese website!