最新消息: 关于Git&GitHub 版本控制你了解多少?
您现在的位置是:群英 > 开发技术 > 编程语言 >
Atom如何实现HTML实时预览?
网络发表于 2021-04-12 17:23 次浏览
本篇文章给大家介绍一下Atom 编辑器实现HTML实时预览的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

相关推荐:《atom教程》

基础实现:

快捷键

在编辑框中按 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 “/.html,/.css”

写在最后,既然你考虑选择atom,那么就要一试到底,学习某个IDE操作的时间成本是很高的,千万不要三心二意。

更多编程相关知识,请访问:编程视频!!

以上就是浅谈Atom实现HTML实时预览的方法的详细内容,更多请关注群英网络其它相关文章!

标签:atom插件安装
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
相关信息推荐
2021-05-12 15:19:00 关键词:html代码大全
摘要:html div居中如何实现?新手朋友可能对html div居中的实现过程还是有点迷糊,那么我们今天就来分享一下html div居中实现的代码,希望对你有所帮助。 div 标签可以把 html 文档分割为独立..
2021-05-08 15:25:48 关键词:Atom
摘要:Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,Java等网页编程语言。它支持宏,自动完成分屏功能,集..
2021-05-08 15:25:38 关键词:dw,css
摘要:dw在html链接css文件的方法:首先在dw软件中建立一个站点并在站点中新建一个CSS文件夹和一个html文件;然后在右上角点击【CSS设计器】,并选择好css文件夹;最后把添加为设置成【链接..
2021-05-08 15:25:08 关键词:atom,vue
摘要:atom安装vue高亮插件的方法:首先打开atom软件,在顶部菜单栏中依次点击“File”->“Settings”->“Install”;然后搜索“language-vue”插件,点击“Install”进行安装即可。..
2021-04-19 17:09:17 关键词:atom,汉化
摘要:Atom编辑器怎么中文汉化?下面本篇文章给大家介绍一下Atom编辑器进行汉化的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。..