이 글에서는 Atom 편집기가 HTML 실시간 미리보기를 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
관련 권장사항: "atom tutorial"
기본 구현:
단축키
를 누르세요. 편집 상자 기본 미리보기를 켤 수 있습니다. (CSS 스타일 제외) 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”
Ctrl + Shift + H
를 눌러 미리보기 패널을 엽니다(CSS 스타일 사용) 🎜🎜🎜 인터넷에서 언급한 대로 단축키를 수정할 필요가 없습니다 🎜🎜🎜🎜🎜플러그 - 구현 중: Dev Live Reload🎜🎜🎜🎜단축 키 호출: CTRL+SHIFT+ALT+R
🎜🎜🎜🎜좀 더 고급 기능으로 브라우저에서 엽니다🎜🎜🎜🎜🎜🎜 플러그인 구현: brower-plus🎜🎜 🎜🎜🎜Atom🎜🎜🎜위 내용은 HTML 실시간 미리보기를 구현하는 Atom의 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!