浅谈Atom实现HTML实时预览的方法

青灯夜游

发布时间：2021-03-17 10:36:00

5978人浏览过

来源于csdn

转载

本篇文章给大家介绍一下atom 编辑器实现html实时预览的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

浅谈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内打开浏览器

百度智能云·曦灵

百度旗下的AI数字人平台

下载

这里写图片描述

插件实现：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 插件更新后导致编辑器崩溃的解决办法

Atom 在 Linux 系统下的启动速度优化

Atom 中 JavaScript 代码格式化的最佳实践

如何在 Atom 中设置代码缩进规则？

Atom 插件与操作系统更新的兼容性问题研究

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

html css chrome gulp html ide http https atom IIS

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Atom如何汉化？方法介绍下一篇：Atom块注释插件multi-comment的安装和使用

作者最新文章

探讨如何在Vue3中编写单元测试

2023-04-25 19:41

深入了解Node中的Buffer

2023-04-25 19:49

一文理解JavaScript中的单例模式

2023-04-25 19:53

如何解决跨域？常见解决方案浅析

2023-04-25 19:57

实用Word技巧分享：简繁转换功能竟然可以这样用！

2023-04-26 17:27

实用Excel技巧分享：4种删除重复值的小妙招！

2023-04-26 17:31

一文聊聊Node中的内存控制

2023-04-26 17:37

一文讨论Vue2中key和Vue3中key的区别

2023-04-26 17:41

【整理分享】7个热门的React状态管理工具

2023-04-26 17:47

深入搞懂Redis中的哨兵

2023-04-26 17:59

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

521

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

262

2023.07.27