如何在博客中使用SublimeText风格的sublime text代码高亮亮样式

Dengo-淡高的技术宅
关于计算机和前端开发的那些事
版权所有 (C) 淡高
从二月份用测试版本build 3012开始用sublime text 3,虽然很多插件在sublime text 3不工作了,因为sublime text 3修复了2的一些bug、提升了性能并集成了不少常用插件的功能,当时没什么要求够用了,就这样傻傻地裸插件空手写代码用了快5个月。上月27号Sublime Text 3公测了,又可以试用了,估计插件的更新也差不多了吧,果断上github逛逛看看有没有sublime text 3能用的插件,经过几天折腾和试用,感觉不错,推荐给大家,各位就择你所好而用之。
Package control 插件管理
sublime text非常强大的插件管理的插件,按下Ctrl+Shift+P,输Package control就可以选择插件的安装、管理、删除等操作,因为sublime text 3的插件需要基于pyhone 3编写,所以用sublime text 2的安装方法不管用,可以看看我之前写的一篇文章,。
此外,安装sublime text 3的插件还可以在github上下载源文件,解压后改名放到
C:\Users\Mr.DenGo(你的电脑名)\AppData\Roaming\Sublime Text 3\Packages 中
重启sublime text 3即可生效。
BracketHighlighter 高亮显示匹配的括号、引号和标签
BracketHighlighter这个插件能在左侧高亮显示匹配的括号、引号和标签,能匹配的 [] ,
&tag&&/tag&等甚至是自定义的标签,当看到密密麻麻的代码分不清标签之间包容嵌套的关系时,这款插件就能很好地帮你理清楚代码结构,快速定位括号,引号和标签内的范围。
插件下载:
TrailingSpacer 高亮显示多余的空格和Tab
有时候在代码结尾打多了几个空格或Tab,一般不会察觉,TrailingSpacer这款插件能高亮显示多余的空格和Tab,并可以一键删除它们,有代码洁癖的朋友应该会喜欢这个插件。
插件下载:
注意,在github上下载的插件缺少了一个设置快捷键的文件,可以新建一个名字和后缀为Default (Windows).sublime-keymap的文件,添加以下代码,即可设置“删除多余空格”和“是否开启TrailingSpacer ”的快捷键了。
{ "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" },
{ "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" }
Alignment 等号对齐
按Ctrl+Alt+A,可以将凌乱的代码以等号为准左右对其,适合有代码洁癖的朋友。
插件下载:
Clipboard-history 粘贴板历史记录
有了这个插件,便可方便使用sublime text 3里的粘贴板历史记录内容,快捷键Ctrl+Shift+V可调出该历史记录面板,按方向键选择想要粘贴的历史记录。不过这是sublime text 2下的插件,Ctrl+Shift+D清除粘贴板历史记录好像不能生效,不过重启sublime也可清除粘贴板的历史记录。
插件下载:
gbk4subl 支持GBK编码
sublime text一个遗憾是不支持中文GBK编码,在编辑一些GBK编码的文件时就会出现乱码,还好sublime text 2有很多可以支持GBK编码的插件,可惜大多在sublime text 3下都不能工作,在github找了下,还好还有gbk4subl这款能让sublime text 3支持GBK编码的插件。
插件下载:
Tradsim 中文繁字体和简体字转换
Tradsim是一款能把中文的繁字体和简体字互相转换的插件,只支持UTF-8编码,虽然觉得有点鸡肋,但还是介绍出来给需要的朋友吧,安装插件,因为插件包里没快捷键文件,所以我们可以自定义一个,可以新建一个名字和后缀为Default (Windows).sublime-keymap的文件,添加以下代码,即可设置“转换为简体字”和“转换为繁字体 ”的快捷键了。注意:转换是文件里全局的中文。
{"keys": ["ctrl+alt+s"], "command": "tradsim_to_sim"},
{"keys": ["ctrl+alt+t"], "command": "tradsim_to_trad"}
SideBarEnhancements 侧边栏增强
SideBarEnhancements本是增强侧边栏的插件,这里将教大家如何用来做sublime text 3浏览器预览插件,并可自定义浏览器预览的快捷键。
安装此插件,点击工具栏的preferences & package setting & side bar & Key Building-User,键入以下代码,这里设置按Ctrl+Shift+C复制文件路径,按F1~F5分别在firefox,chrome,IE,safari,opera浏览器预览效果,当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。
{ "keys": ["ctrl+shift+c"], "command": "copy_path" },
{ "keys": ["f1"], "command": "side_bar_files_open_with",
"paths": [],
"application": "C:\\software\\Browser\\Mozilla Firefox\\firefox.exe",
"extensions":".*" //匹配任何文件类型
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"paths": [],
"application": "C:\\Users\\Mr.DenGo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*"
{ "keys": ["f3"], "command": "side_bar_files_open_with",
"paths": [],
"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
"extensions":".*"
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"paths": [],
"application": "C:\\software\\Browser\\Safari\\safari.exe",
"extensions":".*"
{ "keys": ["f5"], "command": "side_bar_files_open_with",
"paths": [],
"application": "C:\\software\\Browser\\opera\\opera.exe",
"extensions":".*"
ColorPicker 调色盘
在编辑CSS样式的时候,要加个自己喜欢颜色或改改颜色啥的,要到PS里去调色?ColorPicker可以让sublime text 3内置一个调色盘,调好颜色,点击OK就会在光标处生成十六进制颜色代码。
插件下载:
Hex-to-HSL-Color Hex颜色模式转HSL颜色模式
在用CSS3的一些属性时会用到HSL颜色模式,用软件转来转去确实麻烦,用Hex-to-HSL-Color这个插件便可轻松解决,鼠标选中一个或多个十六进制颜色代码,按下Shift+Ctrl+U立马转换为HSL颜色模式。
插件下载:
CSScomb CSS属性排序
有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的,要使他工作需要在环境变量中添加PHP的路径,具体请看上的说明。
插件下载:
CSS Compact Expand CSS属性展开收缩
每个人写CSS都有不同的风格,有些人喜欢写成一行,有些人喜欢写成多行,各有各的好处,我倒喜欢将CSS写成一行,这样能减少CSS文件大小,且屏幕能显示更多的Class方便查找。如果阅读别人的代码不符合自己的习惯,可以用CSS Compact Expand这个插件将CSS格式化一下,按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+] 展开CSS代码为多行显示,此插件由sublime textQQ群里一个牛人封装。
插件下载:
JsFormat javascript格式化
有时从网上扒了人家的js代码来学习学习,打开发现被压缩了,这时就可以用JsFormat插件格式化js代码,恢复未压缩时候的排版,挺给力的。按快捷键Ctrl+Alt+F即可格式化当前的js文件了。
插件下载:
javascript-API-Completions
支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text 3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。
插件下载:
SublimeTmpl 快速生成文件模板
一直都很奇怪为什么sublime text 3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了,SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。
SublimeTmpl默认的快捷键
ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python
如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~
插件下载:
Emmet html/CSS快速编辑(原名Zen Coding)
Zen Coding估计大家都不会陌生,前不久改名为Emmet了,虽然用Emmet编辑html很快,但是要用好用快它需要付出不小的学习成本,学习的曲线有点陡峭,以至于让新手好奇而畏惧,我看看热闹就行了,感觉编辑得再快思维跟不上也是白搭,对我来说sublime text 3自带的代码提示够用了。网上有很多教学视频,有兴趣学习的可以去了解下。
插件下载:
sublimeLinter 代码错误提示
好话写在前面:sublimeLinter是少数几个能在sublime text 3工作的代码检查插件,sublimeLinter能检查html、css、javascript、php等众多语言的错误代码并给出提示,前提是需要配置相应语言的环境,要检查js代码需要安装node.js,检查php代码需要安装php并配置环境等,用这个插件能及时帮我们纠正代码的错误,并培养我们良好的编码习惯和风格。
丑话说在后面:对这货“强制性”的代码风格检查有点不爽,有意义无意义的代码提示经常打乱我敲代码的节奏,并且在后台运行检查机制造成sublime text 3有点小卡顿,虽然部分问题可以设置sublimeLinter来解决,用了sublimeLinter一小段时间后还是放弃了,觉得代码提示对我应该没必要了。
插件下载:
以上插件只是个人觉得好用,各位就择你所好而用之,在win8下sublime text 3中测试工作正常,点击这里还可以查看更多。细心的朋友也发现很多插件的快捷键重叠了,各位就依自己所好设置就行了。最后注意的是在github上下载插件时先看看插件有没有明确说明支持sublime text3,如果没有看看branch分支有没有st3版本的插件,不要下载错了插件版本。
上一篇: 下一篇:
Trackback URL因为觉得博客园自带的代码高亮样式很单一,不符合作为前端的我的审美习惯,于是下定决心要想办法折腾出一个方法来应用上另外一套代码高亮样式。
虽然探索的过程是很痛苦的,但最后还是成功了,但也不枉付出的那些努力。近来有网友问及如何实现,现分享出来,看完本文后你也可以把自己博客的代码整得漂亮些,让别人看着舒服些了。
方法其实是很麻烦的,即使是写了好几篇博客了对这个过程我已经娴熟了,但其实也还是挻麻烦的。不过谁叫我有是个偏执狂呢,为了让页面漂亮我愿麻烦自己,舒服大家。如果你有更好的方法那当然更好。
安装sublimehighlight
我在博客里应用的样式是SublimeText编辑器里面的主题,这跟我用它来编写代码有关。其实如果ST支持复制为富文本形式的话,事情就要方便得多,直接copy然后paste到word里就把样式带上了,包括缩进,代码高亮等。遗憾的是它不支持。所以出路便是找一个可用的ST插件让它支持富文本复制。
好在ST流行度大,社区活跃,插件众多,还真有款能够完成我需求的插件--/。更详细的关于如何安装的问题等可见它的项目页面。
简单点其实跟安装其他ST插件是一样的,先Ctrl+Shift+P调出control panel,然后输入install package,不用输完,当输入了Install后便出来了,然后回车等待插件列表的显示,这个过程大概有个几秒钟的样子。
然后输入插件名称sublimehighlight,选中并进行安装。如果这一步进行顺利,则跳到下一节。
当你进行到上面一步发现搜不出该插件时,需要手动添加该插件的repo到本地。
具体做法是退出刚才的界面重新输入Ctrl+Shift+P调出control panel,输入add repository 选中并回车。
这时界面下方会出现输入repo地址的地方,将输入后回车确定。
当提示添加成功后再次进行上面安装插件的步骤来到插件列表,输入sublimehighlight,选中该插件进行安装,如果一切顺利,恭喜你万里长征第一步走完!
设置喜欢的代码样式
安装完成后,可以设置你喜欢的样式,这个样式是你复制出来的样式,跟你在ST里面用的代码样式是没有关系的。也就是说最终复制出来的代码的样式以这个插件的设置为准。
可选的样式可以在插件的GitHub主页看到,下图直接来自其项目页面,图中包括了主题的名称和预览:
设置方法是依次点开preferences=&package settings=&sublimehighlight=&settings - user
会调出一个设置页面,输入喜欢的样式的名字,像下面这样:
当然,还可以指定要使用的字体等其他设置选项,同样,请前往插件主页进行参考。
将代码复制为HTML
像上面那样弄好后,最后一步,就是把代码复制成HTML形式放到博客里去啦!
依次点开edit=&highlight=&convert to html,此命令会将代码转成HTML形式。
之后,在新出来的标签中,请将class为highlight的div直接ctrl+c复制。这一块便是我们需要的东西。
最后,在写博客的时候,以HTML方式编辑博客,将刚才的内容进行粘贴。噢啦!
确定之后的效果:
过程是有点麻烦吧,如果代码量大的话,这个工作将会很恼人。Anyway, 完全看你愿不愿意了。Enjoy!
阅读(...) 评论()
恭喜妳发现本彩蛋,保佑整年无bug, happy coding
关注我的,分享幽默及前端资讯如何在博客中使用SublimeText风格的代码高亮样式_百度知道
如何在博客中使用SublimeText风格的代码高亮样式
提问者采纳
我在博客里应用的样式是SublimeText编辑器里面的主题,这跟我用它来编写代码有关。其实如果ST支持复制为富文本形式的话,事情就要方便得多,直接copy然后paste到word里就把样式带上了,包括缩进,代码高亮等。遗憾的是它不支持。所以出路便是找一个可用的ST插件让它支持富文本复制。好在ST流行度大,社区活跃,插件众多,还真有款能够完成我需求的插件--n1k0/SublimeHighlight。更详细的关于如何安装的问题等可见它的项目页面。简单点其实跟安装其他ST插件是一样的,先Ctrl+Shift+P调出control panel,然后输入install package,不用输完,当输入了Install后便出来了,然后回车等待插件列表的显示,这个过程大概有个几秒钟的样子。然后输入插件名称sublimehighlight,选中并进行安装。如果这一步进行顺利,则跳到下一节。当你进行到上面一步发现搜不出该插件时,需要手动添加该插件的repo到本地。具体做法是退出刚才的界面重新输入Ctrl+Shift+P调出control panel,输入add repository 选中并回车。这时界面下方会出现输入repo地址的地方,将输入后回车确定。当提示添加成功后再次进行上面安装插件的步骤来到插件列表,输入sublimehighlight,选中该插件进行安装,如果一切顺利,恭喜你万里长征第一步走完!
其他类似问题
为您推荐:
高亮的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Sublime Text 有哪些使用技巧?
按投票排序
1. 更改变量名的几种方法这种情况下该如何快速选中正确的内容?第一种方法:让Cmd-D (Win: Ctrl-D)只选择同一个变量。把光标移到第一个i后面:按Cmd-D (Win: Ctrl-D):按Cmd-D (Win: Ctrl-D):再按一次:再按一次:限制:选取范围中不能有别的同名同类token,如:限制:选取范围中不能有别的同名同类token,如:第二种方法:自动选取所有同名同类token。把光标移到第一个i后面:按Ctrl-Cmd-G (Win: Alt-F3):限制:会将别的作用域中的同名同类token都选中,如:第三种方法:Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 跳过选区。这个方法能解决所有问题,先把光标移到第一个i后面:按Cmd-D (Win: Ctrl-D):按Cmd-D (Win: Ctrl-D):再按一次:再按一次:这个token我们不想选中,这时候只要分别按 Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 就可以跳过这个选区:这个token我们不想选中,这时候只要分别按 Cmd-K, Cmd-D (Win: Ctrl-K, Ctrl-D) 就可以跳过这个选区:这个token也不要,再按一次跳过:这个token也不要,再按一次跳过:你会发现执行跳过选区后就不再是同名同类的token选择了,不过不要紧,我们继续跳过就好:你会发现执行跳过选区后就不再是同名同类的token选择了,不过不要紧,我们继续跳过就好:这个token我们要保留,于是只按Cmd-D (Win: Ctrl-D):这个token我们要保留,于是只按Cmd-D (Win: Ctrl-D):然后就能正确地重命名了。然后就能正确地重命名了。2. 自适应缩进的复制粘贴有些情况下我们需要直接复制粘贴一段网上的代码,有些人可能会这样选中原文进行复制:然后在subl中这样粘贴:然后在subl中这样粘贴:但是你会发现粘贴出来的缩进格式完全对不上号:但是你会发现粘贴出来的缩进格式完全对不上号:正确的做法如下:把目标代码片段的每一个整行都选中,然后进行复制:在subl中对插入行进行正确的缩进:在subl中对插入行进行正确的缩进:然后按Cmd-Shift-v (Win: Ctrl-Shift-v) 进行自适应缩进的粘贴:然后按Cmd-Shift-v (Win: Ctrl-Shift-v) 进行自适应缩进的粘贴:这样的粘贴方式不但能自适应缩进,还能自动将空格或Tab缩进转换成适应你代码的格式。这样的粘贴方式不但能自适应缩进,还能自动将空格或Tab缩进转换成适应你代码的格式。3. 快速创建新文件 (AdvancedNewFile)我在使用ANF之前最快的创建新文件的方法是这样的:Cmd-n (Win: Ctrl-n) 打开编辑窗格:然后Cmd-Shift-p (Win: Ctrl-Shift-p) 打开Command Palette,如果我想写ruby代码,我就敲ssru:然后Cmd-Shift-p (Win: Ctrl-Shift-p) 打开Command Palette,如果我想写ruby代码,我就敲ssru:回车后我的文档就变成Ruby语法的了,这个时候保存文件就会自动提供.rb的后缀名:回车后我的文档就变成Ruby语法的了,这个时候保存文件就会自动提供.rb的后缀名:不过这样的流程还是太繁琐了。我推荐安装使用AdvancedNewFile插件代替原有的新建文件功能。不过这样的流程还是太繁琐了。我推荐安装使用AdvancedNewFile插件代替原有的新建文件功能。新的流程如下:比如我有这样一个project:我想在script目录下建立一个utils文件夹,然后再在utils里面建立一个API.js文件,我只要按 Cmd-Opt-n (Win: Ctrl-Alt-n) 打开一个路径输入框:我想在script目录下建立一个utils文件夹,然后再在utils里面建立一个API.js文件,我只要按 Cmd-Opt-n (Win: Ctrl-Alt-n) 打开一个路径输入框:然后输入script/utils/API.js回车就可以自动创建目录结构以及空文件。由于我们打开了script/app.js文件,我们可以直接输入./utils/API.js创建相对路径的文件结构。另外,对于已存在的目录可以使用Tab补全。创建出来的新文件会自动打开,并且会自动选择相应的语法,没有额外的工作。然后输入script/utils/API.js回车就可以自动创建目录结构以及空文件。由于我们打开了script/app.js文件,我们可以直接输入./utils/API.js创建相对路径的文件结构。另外,对于已存在的目录可以使用Tab补全。创建出来的新文件会自动打开,并且会自动选择相应的语法,没有额外的工作。4. 更改HTML标签我之前更改HTML标签时要么就用上面更改变量名的方式选中一组标签,要么就手动按着Cmd (Win: Ctrl)不放双击标签的开头和结尾:但是如果标签中间内容很多,这样的方式会比较费时。Emmet插件提供了一个非常方便的快捷键能够快速选择对应的一组标签名。首先将光标移至标签的开头或结尾:但是如果标签中间内容很多,这样的方式会比较费时。Emmet插件提供了一个非常方便的快捷键能够快速选择对应的一组标签名。首先将光标移至标签的开头或结尾:然后按Cmd-Shift-K (Win: Ctrl-Shift-') 就能选中这组标签:然后按Cmd-Shift-K (Win: Ctrl-Shift-') 就能选中这组标签:5. CSS快速键入Emmet插件还提供了很多非常方便的CSS Snippets。比方说我们要敲出font-size: 1.8其中1.8是根据一个值计算得来的,比如说是3.6/2的结果,我们可以用Emmet进行这种简单的数值计算。键入fz3.6/2:按Cmd-Shift-Y (Win: Ctrl-Shift-Y)计算数值:按Cmd-Shift-Y (Win: Ctrl-Shift-Y)计算数值:然后按Tab展开Snippet:然后按Tab展开Snippet:6. 2空格-4空格缩进快速切换我之前用别人代码的时候总是遇到缩进空格数跟我不同的情况,后来我学会一种方法能够处理这样的文件。比如我要将4空格缩进转成2空格缩进,首先将目标代码复制到一个独立的编辑窗口中:然后在编辑器右下角的缩进选项菜单中选择Tab Width: 4:然后在编辑器右下角的缩进选项菜单中选择Tab Width: 4:然后在编辑器右下角的缩进选项菜单中选择Convert Indentation to Tabs:然后在编辑器右下角的缩进选项菜单中选择Tab Width: 2:然后在编辑器右下角的缩进选项菜单中选择Tab Width: 2:然后在编辑器右下角的缩进选项菜单中选择Convert Indentation to Spaces:然后你的文档就变成2空格缩进的了:然后你的文档就变成2空格缩进的了:但是这样的方法太过繁琐了不是吗?于是我就写了一个宏脚本,绑定到快捷键上来做这个工作。但是这样的方法太过繁琐了不是吗?于是我就写了一个宏脚本,绑定到快捷键上来做这个工作。打开这个链接: 把to-2.sublime-macro和to-4.sublime-macro文件下载到你Sublime Text配置目录的Packages/User路径下,然后在编辑器菜单中选择Preferences - Key Bindings - User打开用户快捷键配置文件,把Default (OSX).sublime-keymap中的内容添加到这个文件中。然后你就可以用Ctrl-2或Ctrl-4转换文件的缩进空格数了。7. 扩展选区我非常喜欢Emacs的expand-region插件,ST2提供有类似的Expand Selection to Scope功能,但是不太好用,我建议安装ExpandRegion插件。首先把光标移到某个位置:然后按一次Cmd-Shift-Space (Win: Ctrl-Shift-Space)会选择当前的最小区域:然后按一次Cmd-Shift-Space (Win: Ctrl-Shift-Space)会选择当前的最小区域:再按一次会向外扩展区域:再按一次会向外扩展区域:每次按都会不断地向外扩展区域,直到全选为止。每次按都会不断地向外扩展区域,直到全选为止。8. 选区增强插件安装MultiEditUtils插件。这是一个非常强大的选区增强插件,如果你喜欢用复杂的快捷键完成高难度的编辑工作,这个插件可以提供很多方面的支持。详细的功能请阅读项目主页:9. 代码格式化安装CodeFormatter插件。使用时在Command Palette找CodeFormatter相关的命令即可。
,原名为:Zencoding, 快速生成html,css,默认扩展快捷为tab,如果tab按钮损坏,ctrl+e替换。 生成规则在:Preferences -& Browser packages -& Emment -& emment -& snippets.json
中修改。增强的侧边栏增强js注释等号对齐 在Preferences -& package settings -& Alignment -& Settings User添加冒号对齐。{
"align_indent": false,
"alignment_chars": ["=", ":"],
"alignment_space_chars": ["=", ":"]
: 文件路径自动提示
使用 Sublime Text 建议掌握常用命令1、查找打开过的文件:Ctrl+P,然后输入最近的文件名就可以即时预览到文件内容。2、命令输入框(不知道是不是这样叫):Ctrl+Shift+P2、命令输入框(不知道是不是这样叫):Ctrl+Shift+Pa)切换语法模式:Set Syntax : [编程语言]
可以缩写为:sspy
这样就可以切换语法模式了,这以便于代码高亮及插件调用(比如HTML模式会使Emmet生效)这样就可以切换语法模式了,这以便于代码高亮及插件调用(比如HTML模式会使Emmet生效)b)安装插件(前题是你安装了插件管理器):输入这个命令之后回车,再输入需要的插件,就可以安装了。3、多处编辑功能:Ps:这个功能至关重要,我都不敢回想接触 Sublime Text 以前是怎么活过来的。比如这样的代码:&div&
如果我需要为所有 h2 换成 h1,再加上一个 class="title" 属性:那么我只需要选中一个 h2,然后按住 Ctrl+D (因为按一下只会只选择下一个)于是就变成:于是就变成:然后我就可以输入 h1 ,就变成然后我就可以输入 h1 ,就变成这个时候,按一下 HOME (Mac下是Commond + 左箭头),再按几下右箭头,再输入 class="title"
然后就变成欧了~!这个可以举一反三,巨有用巨实用!当然 Ctrl + F 调出查找功能、Ctrl + Shift + F 调出查找并替换功能应该不用讲了。关于编码File -& Reopen with Encoding 可以以某编码打开File -& Save with Encoding 可以保存为某一编码编码问题就是这么简单~关于中键,也就是鼠标滚轮!鼠标滚轮也可以选中字符,但不同用鼠标左键选择的是,他不会跨行选择,而是直接矩形选择,比如:配合 Ctrl 多处选择进行多处编辑,这直接是赞爆了有木有!!配合 Ctrl 多处选择进行多处编辑,这直接是赞爆了有木有!!还有菜单里这个功能超赞!可以快速设置 Tab 的宽度,默认是4,也可以 Spaces 与 Tabs 之间转换。(btw, 习惯用 Tab 缩进的程序猿,在提交代码时转换成2个空格的缩进是个好习惯)关于插件插件太多了,Google/百度/知乎一搜就有推荐的,这里写推荐一个~!写前端的话 Emmet 插件是必须的,比如:输入html:5
按TAB,会这样&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
按TAB,会这样&div&&/div&
输入section#block$*3&h2.title+p.words*2
按TAB,会这样&section id="block1"&
&h2 class="title"&&/h2&
&p class="words"&&/p&
&p class="words"&&/p&
&/section&
&section id="block2"&
&h2 class="title"&&/h2&
&p class="words"&&/p&
&p class="words"&&/p&
&/section&
&section id="block3"&
&h2 class="title"&&/h2&
&p class="words"&&/p&
&p class="words"&&/p&
&/section&
还有很多用法,可以自行Google/百度 “Emmet”。-------------------------最后附上 慕课网 关于 Sublime Text 的教学视频:
工欲善其事,必先利其器我认为Sublime的强大有3方面:丰富的快捷键组合实用的插件支持代码片段snippet下面我将从其本身自带的快捷键及插件做出介绍。________________________________________Sublime快捷键Sublime原生自带的快捷键也能很大程度上方便开发,这里以Mac为主,windows多数与其相似,以下是Mac下所默认的快捷键:Mac备注:具体符号对应的按键?Command key?Control key?Option key?Shift Key为了方便大家记忆,将快捷键分成了8个类型, 分别为Edit(编辑)Selection(光标选中)Find(查找)View(视图)Go to(跳转)Project(工程)General(通用)Tabs(标签)Edit(编辑)
?[向左缩进 | Left indent?]向右缩进 | Right Indent??↑与上一行互换(超实用!)| Swap line up??↓与下一?行互换?(超实用!)| Swap line down??D复制粘贴当前行(减少多余的粘贴)| Duplicate line?J拼接行(css格式化时挺有用) | join lines?←去往行的开头 | Beginning of line?→去往行末尾 | End of line??/块注释 | Toggle comment block?K从光标开始的地方删除到行尾 | Delete to end??K删除一整行 | delete line?T相邻单词互换位置,在','前试用,有惊喜(很有趣)| Transpose???向光标前插入一行|insert line before??向光标后插入一行|inter line after??T插入特殊字符|Special characters?D向后删除(很怪异的操作,不过感觉很酷炫)Selection(光标选中)
?D选中相同的词 | Expand selection to words??G多重文本光标选中(再也不用? D一个一个的找啦)| Expand all selection to words?L选中一行|Expand selection to lineEsc单选(取消多重选择)|Single selection,Cancel multiple selections??↑一行一行向上选中|Add previous line??↓一行一行向下选中|Add next line??L将选中的区域分割成多行选中状态(多光标操作状态)|Split into lines?+拖动鼠标多重光标选中??J已缩进层级为依据,一层层向外选中|Expand selection to indentation??M将匹配括号中的内容选中|Expand selection to bracketsFind(查找)
?F普通查找|Find?G查找下一个|Find next??F在文件夹中查找| Find in files??E缓存用于替换的内容,方便之后的替换|Use selection for replace?E缓存用于查找的内容,方便之后的查找|Use selection for find??E一个接一个往下替换|Replace nextView(视图)
推荐使用Origami插件,可以随意对sublime进行分割Go to(跳转/定位)
?P跳转文件(很方便)| Go to anything?R定位文件中的方法@| Go to symbol?G定位文件中的行号:| Go to line?M定位匹配的括号 | Jump to matching bracket?F2设置/取消定位标记| Toggle bookmarkF2跳转到定位标记处 | Next bookmark??F2清除所有定位标记| Clear all bookmarks??→下一个打开的文件| Next fileProject(工程)
??P在保存过的工程中切换,随意变换工程环境|Switch project windowGeneral(通用)
??P 打开命令行| Command prompt?K, ?B隐藏/打开 侧边栏| Toggle side barTabs(标签栏)
??t 打开最后一次关闭的文件|Open last closed tab^Tab 循环遍历tab|Cycle up through tabs^?Tab 反方向循环遍历tab|Cycle down through tabs_____________________________________实用插件Sublime里有些插件十分强大,在这里我推荐我最喜欢的几个:首推Emmet:这个插件内置的功能很强大,它的快捷键详细说明如下:操作、编辑HTML:快速生成html语法篇:理解记忆后,能增加很多开发效率。Modific: Highlight lines changed since the last commit 无论git,还是svn 只要一保存,都能标出代码的改动状态,超赞Tag: HTML格式化jsformat: javascript格式化Origami:Sublime视图设置_____________________________________代码片段常用的都在这里能找到,有其它需要就自己配吧:总结:这里面有些快捷键单兵作战能力可能不强,但如果你能灵活使用,将它们配合起来,能发挥很大的威力。可能你会觉得快捷键有些多,记不下来,但是只要坚持使用,把它变为习惯,你的开发效率肯定会得到提高的!希望对大家有帮助,有疑问的可以单独私信。尾声:windows下的快捷键一览
Alt+R : 开启正则表达式功能
Alt+Enter: 找到匹配目标后全部选择
Ctrl+R:前往 method(mac下?R)
Ctrl+M:跳转到对应括号
按Ctrl+Shift+上下键,可替换行
Ctrl+D:选择单词,重复可增加选择下一个相同的单词
Ctrl+L:选择行,重复可依次增加选择下一行
Ctrl+Shift+P:打开命令面板
Ctrl+P:搜索项目中的文件(mac下?P),在里面输入:
admi@auto 可以定位到相应文件夹(admin.html)下的相应方法(auto)。
Ctrl+G:跳转到第几行
Ctrl+W:关闭当前打开文件
Ctrl+Shift+W:关闭所有打开文件
Ctrl+Shift+V:粘贴并格式化
Ctrl+Shift+L:选择多行
Ctrl+Shift+Enter:在当前行前插入新行
Ctrl+X:删除当前行
Ctrl+U:软撤销,撤销光标位置
Ctrl+J:选择标签内容
Ctrl+F:查找内容
Ctrl+Shift+F:查找并替换
Ctrl+H:替换
Ctrl+N:新建窗口
Ctrl+K+B:开关侧栏
Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身
Ctrl+F2:设置/删除标记
Ctrl+/:注释当前行
Ctrl+Shift+/:当前位置插入注释
Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的
Ctrl+Shift+A:选择当前标签前后,修改标签用的
Shift+F11:全屏免打扰模式,只编辑当前文件
Alt+F3:选择所有相同的词
Alt+.:闭合标签
Alt+Shift+数字:分屏显示
Alt+数字:切换打开第N个文件
Shift+右键拖动:光标多不,用来更改或插入列内容
鼠标的前进后退键可切换Tab文件
按Ctrl,依次点击或选取,可需要编辑的多个位置
Ctrl+shift+D: 备份多个当前行
Ctrl+shift+T: 恢复已经关闭的标签
Keypress Command
Ctrl + X Delete line
Ctrl + ? Insert line after
Ctrl + ? + ? Insert line before
Ctrl + ? + ↑ Move line/selection up
Ctrl + ? + ↓ Move line/selection down
Ctrl + L Select line - Repeat to select next lines
Ctrl + D Select word - Repeat select others occurrences
Ctrl + M Jump to closing parentheses Repeat to jump to opening parentheses
Ctrl + ? + M Select all contents of the current parentheses
Ctrl + KK Delete from cursor to end of line
Ctrl + K + ? Delete from cursor to start of line
Ctrl + ] Indent current line(s)
Ctrl + [ Un-indent current line(s)
Ctrl + ? + D Duplicate line(s)
Ctrl + J Join line below to the end of the current line
Ctrl + / Comment/un-comment current line
Ctrl + ? + / Block comment current selection
Ctrl + Y Redo, or repeat last keyboard shortcut command
Ctrl + ? + V Paste and indent correctly
Ctrl + Space Select next auto-complete suggestion
jumps to your last change before undoing change when repeated
Ctrl + Alt + Up Column selection up
Ctrl + Alt + Down Column selection down
Alt + ? + Up Column selection up
Alt + ? + Down Column selection up
Navigation/Goto Anywhere
Keypress Command
Ctrl + P Quick-open files by name
Ctrl + R Goto symbol
Ctrl + ; Goto word in current file
Ctrl + G Goto line in current file
Keypress Command
Ctrl + ? + P Command prompt
Ctrl + KB Toggle side bar
Ctrl + ? + Alt + P Show scope in status bar
Find/Replace
Keypress Command
Ctrl + F Find
Ctrl + H Replace
Ctrl + ? + F Find in files
Keypress Command
Ctrl + ? + t Open last closed tab
Ctrl + PgUp Cycle up through tabs
Ctrl + PgDn Cycle down through tabs
Ctrl + ? Find in files
Alt + [NUM] Switch to tab number [NUM] where [NUM] &= number of tabs
Split window
Keypress Command
Alt + ? + 2 Split view into two columns
Alt + ? + 1 Revert view to single column
Alt + ? + 5 Set view to grid (4 groups)
Ctrl + [NUM] Jump to group where num is 1-4
Ctrl + ? + [NUM] Move file to specified group where num is 1-4
Keypress Command
Ctrl + F2 Toggle bookmark
F2 Next bookmark
? + F2 Previous bookmark
Ctrl + ? + F2 Clear bookmarks
Text manipulation
Keypress Command
Ctrl + KU Transform to Uppercase
Ctrl + KL Transform to Lowercase
先写个大概,以后有空了就补充的详细点,把引用的链接都去掉,翻译成中文,加些图片之类的:修改ST的图标,默认图标实在太丑,以下列出的都是Mac OS X上用的icns格式
Mac下这种方式可能会失效(我用ST3怎么都不行,我是用搞定的)不错的替换图标选择:
更多:: ctrl+`后复制对应的命令后回车,没有错误即成必备插件:
ConvertToUTF8:
ST默认是不支持简体和繁体编码的,这个插件自动转换乱码。文本自动变成正常后需要选择File&Save File Encoding to&UTF-8才会正式保存Theme - Soda
让ST的整体风格更符合Mac注意,这个插件的dark和light风格只会变更整个程序的骨架风格,不会更改编辑区(比如背景色及高亮显示)。那是属于Color Scheme做的其他插件就因人而异了,不知道有啥好用的可以看看都有哪些: 支持搜索文件后用ST打开或者用ST打开相应地址的文件终端命令行中调用sublime,这样以后命令行中直接用命令subl加对应路径就可以用ST打开了ln -sf "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
最后,可以开启Vintage模式,类vi模式。不懂vi使用的同学可以不用看这段Settings - User中,把ignored_packages中的Vintage删掉即可。如果想要默认就在“命令模式”,加上"vintage_start_in_command_mode": true
给大家推荐个超赞的快捷键练习网站~
1.善用快捷键sublime的快捷键可以参照这一篇博文中所写的内容。此外,若稍有英文基础,则更建议打开Preferences-&KeyBindings--Default,这里面是详细的快捷键配置。没必要一次性背下来,每周或者个把月打开来看一看。或者做一些重复性操作的时候可以打开来看一看有没有方便的快捷键能帮到自己。另外,也推荐阅读Preferences-&Settings-Default中的内容,能帮助对sublime有个大概的认识。而一些sublime最常用的快捷键,直接以sublime为关键词百度,头两页安利sublime的文章里面举出了挺多的例子。而一些sublime最常用的快捷键,直接以sublime为关键词百度,头两页安利sublime的文章里面举出了挺多的例子。此外,sublime官网首页 也给出了一些常用功能和常用操作的示例。2.善用插件插件的简洁与安装方法百度或者谷歌就能搜到,使用插件,可以进一步简化操作,还能方便的完成许多奇妙的功能。以下为package controller安装教程个人常用的插件主要是自动编译、自动补全、代码高亮等功能。此外,一些插件还会提供比较丰富的代码片段,结合tab键自动补全代码功能,可以加快输入速度。在安装插件的界面中,可以输入关键词来寻找某个领域的插件,如果对某个插件想有深入了解,插件搜索结果里面附有该插件的github页面,里面有更加详细的介绍和使用帮助。或者直接在github中搜索sublime,有很多奇葩的插件,比如居然有Evernote的插件=_=|||。最后,插件玩过之后记得及时清理。一方面,插件的快捷键可能会有冲突,另一方面,插件安多了,sublime的启动速度会有所下降。3.其他个人常用插件如下:
一个html js 和css代码美化的插件
写html、xml很好用的一个插件
css颜色高亮,能够直接显示对应值代表的颜色 高亮html标签的一个插件
less css的一个插件,提供保存时自动编译等功能。
泻药。个人觉得,,优雅使用任何工具的最重要技巧就是熟记快捷键。。我对sublime使用还谈不上优雅,好多快捷键记不住。。不过至今用的最多的快捷键应该是Ctrl+P和Ctrl+R和Ctrl+Shift+F。貌似Mark功能是个隐藏的大Boss,熟练掌握了应该会提升很多效率。另外他的Build System也挺好用,如果是写前端的话,可以把编译LESS等等加到Build里面(如果没用grunt等自动化工具的话),这样也能省很多事。Plugin的话,大概写不同代码需要的就千差万别了,我个人不是Plugin党。
多光标操作:【Cmd + 鼠标】选择不同行中位置,然后可以同时编辑多个位置移动当前行:【Ctrl + Cmd + Up / Down】上、下移动当前行复制当前行:【Cmd + Shift + D】复制当前行
我补充一个python pep8自动格式整理(Python PEP8 Autoformat)的插件吧,下载地址:安装快捷键cmd+shift+P,在Package Control中找到Install Package查找到Python PEP8 Autoformat并安装快捷键GNU/Linux: ctrl+shift+rOSX: ctrl+shift+rWindows: ctrl+shift+r格式整理效果和用autopep8整理出来的效果略有差别,用不用看个人喜好吧,不过我是喜欢随手整理格式所以这个插件还是很好用的。------------
学会正则表达式的查找替换就可以大大地提高效率。
我来补一个:Lorem然后+tab扩展成一段随机文字
掌握有用的插件,提高效率。
关键是要有个顺眼的配色~
对于强迫症患者来说,不能方便自定义各种配色方案的编辑器都不是好编辑器...
Sublime按住 Ctrl+' 组合键即可快速把图片文字转换成 data:image/base64 格式。这个难道不牛逼?很少人知道~
ctrl+shift+p intsall package. 装不同的插件,除了emmet,css3插件也很棒,还有各种js的,比如安装好后. 新建一个空html文档,写html:5 + tab,自动生成html5模版.官网有更多tips}

我要回帖

更多关于 sublime text代码高亮 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信