The Atom editor previews HTML pages in real time

The editor previews HTML pages in real time

Why look

Every time you preview an HTML page, you need to open a variety of browsers; even if it's not debugging, just to see the effect; switching to and from, all kinds of refreshes, feeling like a waste of time; a real-time preview of DW that's been used before, feels like a great feature; and you're on the path of slowly finding the atom plug-in repository...

Plug-in: atom-html-preview

Official Description: A live preview tool for Atom Editor. In short: a tool for real-time previews within the Atom editor

How to get it

1. Install via the command line

apm install atom-html-preview

2. Search for atom-html-preview editor

How to use it and how it works

Shortcuts

• Default shortcut: CTRL + P with the built-in core plug-in (switch file that one) - very bad
• Modified shortcuts: CTRL + F12 (feels easy to use and there are no conflicting shortcuts)

 #实时浏览器调用快捷键
 'atom-text-editor':
  'ctrl-F12':'atom-html-preview:toggle'

Tips

The weight written in keymap is the highest... A newer version of atom has a plug-in built into Dev Live Reload;

The role of this plug-in is to reload all styles and rules, a bit like linux source xx.sh the same: Instantly Effective Call shortcuts are CTRL + SHIFT + ALT +R

Of course, turning off the atom and then opening the atom editor can also have the effect of reloading all style rules...

The effect map

I tested it with pages written in the BS framework.... you can preview it correctly, and internal css is cdn and you can recognize it correctly.

Browser guesses

Run to the plug-in's GitHub repository page and see only a few cson rules without calling an external browser.

So there's only one answer. . . that's the chromium framework. . . so the kernel should also be blink

The following is a reference to the external description of the atom (don't know if it's official)

Web-local applications

Atom is a web-based desktop application that, like other desktop applications, has its own icons, local menus, dialog boxes, and access to the entire file system.

Whether you're tuning Atom's CSS interface or adding some HTML and JavaScript key features, it's easy to control and easy to use.