HTML 실시간 미리보기를 구현하는 Atom의 방법에 대한 간략한 설명

이 글에서는 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”

플러그인 구현:atom-html-preview

파일->설정->설치-> 검색 atomic-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🎜🎜🎜🎜 http로 설정해야 하는 livereload 플러그인을 실행하기 위한 gulp 작업을 작성하세요.
Gulp를 모른다면 시작할 수 있습니다: https://www.gulpjs.com.cn/🎜🎜🎜🎜다양한 방법이 있습니다 🎜🎜🎜🎜브라우저 동기화 사용
browser-sync start - -server -files "🎜/.html,🎜/.css"🎜🎜는 맨 마지막에 작성되어 있으니 Atom 선택을 고려하셔야 합니다. 끝까지 시도해보고 특정 IDE 작업을 배우십시오. 시간 비용이 매우 높으므로 마음을 열지 마십시오. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 HTML 실시간 미리보기를 구현하는 Atom의 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!