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

If you don’t understand, you can check Baidu Encyclopedia https://baike.baidu.com/item/iis/99720?fr =aladdin

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

Write a gulp task to run the livereload plug-in, which needs to be set up as http.

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

There are many other ways to use

browser-sync

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

is written in Finally, since you are considering choosing atom, you should try it to the end. The time cost of learning a certain IDE operation is very high, so don't be half-hearted.

For more programming related knowledge, please visit:

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!