asp代码在dwearwear转换成html格式怎么转,为前端而生的编辑器Brackets及配置推荐
关于
Brackets 号称是懂web设计的开源编辑器。之所以这样说,是因为它是为前端工程师准备的,在前端开发方面做了很多特别设计。比如 可以在HTML里面直接跨文件编辑标签所涉及的CSS、PSD生成web文件、实时预览等。
该项目由Adobe创建和维护,并在Github上开源。
该编辑器是用HTML/CSS/JavaScript开发的,所以前端工程师可以能很容易读懂并进行改进。
早在两年前刚起步时我就开始关注了,但鉴于功能还不完善、社区不够活跃,一直保持观望状态。最近重装电脑,索性把一直用的Sublime放到一边,试着用Brackets。
初体验
用惯Sublime,初次使用Brackets的时候总会不自觉的进行比较。感觉Brackets更像干净的白纸,等着开发者去图画。Brackets要靠插件来完成Sublime很多基本功能。
下面先介绍Brackets特有的功能,再介绍插件和小技巧。
特别的功能
在HTML里编辑CSS
在HTML文件里,鼠标放到一个要编辑样式的标签上,快捷键CTL + E,就可以看到有个下拉编辑框,这里显示了与这个标签有关的样式,直接修改后,相应的样式文件也会改变。
可以看到,这个样式定义在style.css文件里,你还可以new rule新建样式。
预览颜色
在样式文件里,鼠标放到一个颜色属性上,就可以预览颜色
用取色器编辑颜色
在颜色值上按CTRL + E,调出取色器进行编辑:
文件地址提示
图片预览
HTML:
Markdown:
主题
更换主题
在网上找的你喜欢的主题,我用的是一个基于 Sublime Monokai 的主题。GIthub 的地址是 https://github.com/Brackets-Themes/Monokai。
有几种方法添加:
通过URL
在右边工具栏找到一个望远镜的图标,点击Install from URL,粘贴地址上去安装。
上传压缩包
同样在上图的位置,拖拽zip文件即可
在线搜索
Brackets已经被墙,能用的几率很小。完全无法理解为什么编辑器网站都被墙 = =
复制到插件文件夹
从菜单Help > Show Extensions Folder > User中进入扩展文件夹,把压缩包解压到这里,或者 git clone 主题项目。重启编辑器即可。重启快捷键是 F5。
创建新主题
创建主题文件
打开编辑器,从菜单Help > Show Extensions Folder > User中进入扩展文件夹
新建一个文件夹,起一个你喜欢的主题名字
在这个文件夹新增文件package.json、theme.less(CSS也行)
修改package.json
按照以下模板填写,可以参考别人的主题的文件;
{
"name": "yourname.my-shiny-theme",
"title": "My Shiny Theme",
"description": "This theme is so shiny that you'll need to wear shades!",
"homepage": "https://github.com/yourname/my-shiny-theme",
"version": "1.0.0",
"author": "Your Name (http://your.url)",
"license": "MIT",
"theme": {
"file": "theme.less",
"dark": true,
"addModeClass": true
},
"keywords": ["theme"]
}
添加主题
在编辑器菜单View > Themes里添加你的主题
编辑你的theme.less文件,保存后即可生效,在编辑器里看到效果
开发
前面说到,Brackets是用HTML、CSS、JavaScript开发的,所以前端工程师能很轻易掌握开发这个编辑器的技能。
修改编辑器主题,就行开发网页一样。按F12就能看到Development Tool,是不是Chrome的开发者工具的既视感!是不是一下子就对Brackets有很强烈的归属感~
所以你可以审查元素,获得类名,然后到CSS/LESS文件里进行修改。
比如,我找到JS文件里for用到的class是cm-keyword,然后就可以在样式文件里修改。
为不同文件格式设置不同注释样式
在1.1版本之后,在主题package.json 文件里开启 addModeClass 模式,就可以这样为CSS的注释写样式:
.cm-m-css.cm-tag {
color: #6c9ef8;
}
其他Common modes:
.cm-m-clike: PHP
.cm-m-css: CSS, LESS
.cm-m-javascript: JavaScript
.cm-m-xml: HTML, XML
修改
比起从0开始,还是站在巨人的肩上比较好。这是我在主题上进行的修改,不过牵一发动全身,修改需谨慎:
span.cm-builtin { /*CSS id*/
color: #FFFD83;
}
span.cm-header { /*MD标题*/
color: #53C0E0;
}
.cm-s-monokai-dark-soda .cm-tag { /*CSS标签、MD图片标签*/
color: #F5A14E;
}
.cm-s-monokai-dark-soda .cm-comment { /*注释、MD文件的代码块*/
color: #c7d4d6;
}
span.CodeMirror-matchingbracket { /* 聚焦的括号 */
color: #F5C04C !important;
background-color: none;
}
小技巧
自动补全反括号、引号
Sublime是默认开启这个功能,Brackets需要手动打开,刚开始还比较困惑,差点因为没找到这个小功能而放弃Brackets,因为实在容易出错。
开启菜单 Edit--Auto Close Brace
查找解决方案的时候,发现这个功能以前是默认开启的,后来取消了,感觉很不自在。我觉得大多数人都用过Sublime,它的一些好的做法应该保留,这样用户不会产生太大抵触心理。不过ST3也是把很多ST2默认开启的功能改为手动开启,也是烦。
修改文件树字体大小
习惯可能大字了。在Sublime是通过 User Setting 里添加 JSON 信息即可。
通过开发者工具,找到定义文件树的标签和样式定义,可以看到是在style.css文件里的#project-files-container a (注意,我安装的文件树的插件,所以和你所找到的会不一样):
点击style.css,进入开发者工具的 Source 面板,右键Reveal in navigator,可以看到文件所在目录。
找到后打开编辑,保存重启即可。
asp代码在dwearwear转换成html格式怎么转,为前端而生的编辑器Brackets及配置推荐相关推荐
- php 货币 2位,php中数字转换成货币格式实现代码
介绍一个自定函数用来把 数字转换成货币格式有需要的同学可以参考一下本函数. 代码如下 复制代码 function format_money( $STR ) { if ( $STR == " ...
- word文档转换成swf格式文件在网页中用flash显示
word文档转换成swf格式文件在网页中用flash显示 在OA系统中我们常常需要将上传的word文档在网页中阅览,一般上传后的文档用html的形式查看是会导致排版混乱的,这次我介绍在ASP.NET中 ...
- 如何将CSDN文档转换成IPYNB格式的文档?
简 介: ※IPYNB格式的文档可以很方便在Jupyter Notebook环境内方便研究人员对于算法.数据进行操作.Markdown文本则便于形成各种网络文档.本文介绍了利用notedown实现将C ...
- python datetime格式转换_分别用Excel和python进行日期格式转换成时间戳格式
最近在处理一份驾驶行为方面的数据,其中要用到时间戳,因此就在此与大家一同分享学习一下. 1.什么是时间戳? 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01 ...
- netbeans html 格式化,在NetBeans IDE8.0中怎么把html的文件转换成jsp格式
满意答案 在NetBeans IDE8.0中把html的文件转换成jsp格式的方法: 将html页改成jsp有两种方法,第一种是直接修改html文件,另一种是新建jsp文件. 1.原始html文件内容 ...
- CTime,Systemtime的比较还有转换成日期格式。
vc为我们提供了两种日期型的变量. 一种是CTime.他的缺点就是年份只支持到2038年,以后的日期就不支持啦,如果你的项目有20-30年的寿命,你就选择使用SYSTEMTIME.这个时间函数来进行比 ...
- linux 秒数转时间格式,通过delphi将秒数转换成日期格式
摘要 将秒数转换成日期格式,是经常用到的一个算法,下面有几个方法,可以借鉴 具体代码 1:转换成HH:MM:SS格式的字符串格式: function SecondToTime(a:integer):s ...
- php 公钥格式转换,如何把OpenSSH公钥转换成OpenSSL格式
<如何把OpenSSH公钥转换成OpenSSL格式>要点: 本文介绍了如何把OpenSSH公钥转换成OpenSSL格式,希望对您有用.如果有疑问,可以联系我们. 首先看看OpenSSL工具 ...
- vue-axios下载文件流blob,ie下载报传递给系统调用的数据区域太小.ie文件流下载报错;文件下载失败将blob的错误信息转换成json格式
本次下载是后台文件流传输,前端下载,前端将拿到的下载id和名称downloadName传递给下载方法:如果是多个下载,可以采用数组for循环 情景描述: 1.如果符合导出条件, 后端直接返回数据流,如 ...
最新文章
- 奔小康赚大钱 hdu 2255( KM )
- 用WMI获取远程机器操作系统的详细信息
- socket同步和异步通信区别_程序员必知必会,同步通信与异步通信,你了解多少...
- linux中使用svn客户端
- 1.8 Arrays工具类
- django-TDD
- QT的QWriteLocker类的使用
- 聊聊Java中的并发队列中 有界队列和无界队列的区别
- vm磁盘映射 不能启动_Oracle的启动与关闭-数据库(4)
- 移动端使用页尾文字使用绝对定位遇到input框会飘起来的处理方案
- Dubbo 集成 ZooKeeper 注册中心实现服务调用
- Matplotlib常用命令
- hpux11.31 环境下如何查看磁盘的WWID( scsimgr lun_map)
- adb指令通过uid控制_图文教程:PC利用adb工具通过CMD命令控制手机动作(备忘笔记)...
- Oracle diag目录下面的大量trace trc文件
- Android ListView 滑动背景为黑色的解决办法 listview小知识整理
- 最新SSCI影响因子以及分区名单
- echart获取geoJson格式世界各国地图的资源,世界地图,世界各国分区显示,精确到乡镇一级资源
- hdu 1864 最大报销额
- 【考研政治笔记】唯物论中物质观与意识观辨析
热门文章
- vcftools报错:Writing PLINK PED and MAP files ... Error: Could not open temporary file.解决方案
- “进化”的搜索方式:揭秘微软语义搜索背后的技术
- 【干货】B站品牌营销指南.pdf(附100页pdf下载链接)
- 研究生科研必备!!!2015-2020年各类国际会议基于图像的三维重建论文综述(1)——总览
- python深度学习第一讲——用python写神经网络
- 【广告技术】揭秘!腾讯广告是如何有效划分用户群体的
- influxdb java api使用_java使用influxDB数据库的详细源码
- sh mysql configure_【翻译自mos文章】使用config.sh/config.bat来configureorre-con
- oracle导出自增设置,oracle008:oracle自增,自适应,数据闪回,导入导出
- Leetcode每日一题:973.k-closest-points-to-origin(最接近原点的K个点)