HBuilder HTML 自定义代码块

 =begin

 本文档是HTML代码块的编辑文件。注意不要把其他语言的设置放到html里来。

 HBuilder可使用ruby脚本来编辑代码块和增强操作命令。

 1、编辑代码块

 如果要新增一个代码块，复制如下一段代码到空白行，然后设定参数。

     'Style'是代码块的显示名字；

     s.trigger = 'style' 是设定激活字符，比如输入style均会在代码提示时显示该代码块；

     s.expansion = '' 是设定该代码块的输出字符，其中$0、$1是光标的停留和切换位置。

 snippet 'Style' do |s|

   s.trigger = 'style'

   s.expansion = '<style type="text/css" media="screen">

     $0

 </style>'

 end

 以上以HTML代码块做示例，js和css代码块类似，使用时注意避免混淆

 2、编辑按键命令

 如果要新增一个按键操作命令，复制如下一段代码到空白行，然后设定参数。

 'Br'是命令名字；

 s.key_binding = 'CONTROL+ENTER' 是设定按什么快捷键可以触发这个命令；

 s.expansion = '<br/>' 是设定输出字符。

 snippet 'Br' do |s|

   s.key_binding = 'CONTROL+ENTER'

   s.expansion = '<br/>'

 end

 操作时注意冲突，注意备份，有问题就还原。

 多看看已经写的ruby命令，会发现更多强大技巧。

 修改完毕，需要重启才能生效。

 玩的愉快，别玩坏！

 脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle ，可以把你的配置共享到这里，也可以在这里获取其他网友的版本

 =end

 require 'ruble'

 with_defaults :scope => 'text.html entity.other.attribute-name.html' do |bundle|

     snippet 'data-' do |s|

         s.trigger = 'data-'

         s.expansion='data-${1:type/role/transition/icon/iconpos/*} = "$2"'

         s.locationType='HTML_ATTRIBUTE'

     end

 end

 with_defaults :scope => 'text.html text' do |bundle|

 snippet t(:html_4_strict) do |s|

   s.trigger = 'doctype'

   s.expansion = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

     "http://www.w3.org/TR/html4/strict.dtd">

 '

 end

 snippet t(:xhtml_1_frameset) do |s|

   s.trigger = 'doctype'

   s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 '

 end

 snippet t(:xhtml_1_strict) do |s|

   s.trigger = 'doctype'

   s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 '

 end

 snippet t(:xhtml_1_transitional) do |s|

   s.trigger = 'doctype'

   s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 '

 end

 snippet t(:xhtml_11) do |s|

   s.trigger = 'doctype'

   s.expansion = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 '

 end

 snippet t(:movie) do |s|

   s.trigger = 'movie'

   s.expansion = '<object width="${2:320}" height="${3:240}" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">

     <param name="src" value="${1:movie.mov}"/>

     <param name="controller" value="${4:true}"/>

     <param name="autoplay" value="${5:true}"/>

     <embed src="${1:movie.mov}"

         width="${2:320}" height="${3:240}"

         controller="${4:true}" autoplay="${5:true}"

         scale="tofit" cache="true"

         pluginspage="http://www.apple.com/quicktime/download/"

     ></embed>

 </object>'

 end

 snippet t(:html_4_transitional) do |s|

   s.trigger = 'doctype'

   s.expansion = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

     "http://www.w3.org/TR/html4/loose.dtd">

 '

 end

 snippet 'input with label' do |s|

   s.trigger = 'input'

   s.expansion = '<label for="$2">$1</label><input type="${3:text/submit/hidden/button}" name="$2" value="$5" id="$2"/>'

 end

 snippet t(:option) do |s|

   s.trigger = 'opt'

   s.expansion = '<option value="${1:option}">${1:option}</option>'

 end

 snippet 'input' do |s|

   s.trigger = 'input'

   s.expansion = '<input type="$1" name="$2" id="$2" value="$3" />'

   s.needApplyReContentAssist = true

 end

 snippet 'textarea' do |s|

   s.trigger = 'textarea'

   s.expansion = '<textarea name="$1" rows="$2" cols="$3">$0</textarea>'

 end

 snippet 'canvas' do |s|

   s.trigger = 'canvas'

   s.expansion = '<canvas id="$1" width="$2" height="$3"></canvas>'

 end

 snippet 'iframe' do |s|

   s.trigger = 'iframe'

   s.expansion = '<iframe src="$1" width="$2" height="$3"></canvas>'

   s.needApplyReContentAssist = true

 end

 snippet t(:nbsp) do |s|

   s.key_binding = 'OPTION+Space'

   s.expansion = '&nbsp;'

 end

 snippet 'Br' do |s|

   s.key_binding = 'CONTROL+ENTER'

   s.expansion = '<br/>'

 end

 snippet 'link' do |s|

   s.trigger = 'link'

   s.expansion = '<link rel="stylesheet" type="text/css" href="$1"/>'

   s.needApplyReContentAssist = true

 end

 snippet 'meta' do |s|

   s.trigger = 'meta'

   s.needApplyReContentAssist = true

   s.expansion = '<meta name="$1" content="$2"/>'

 end

 snippet 'meta_UTF8' do |s|

   s.trigger = 'metautf'

   s.expansion = '<meta charset="UTF-8"/>'

 end

 snippet 'meta_GB2312' do |s|

   s.trigger = 'metagb'

   s.expansion = '<meta charset="GB2312"/>'

 end

 snippet 'meta_nocache' do |s|

   s.trigger = 'metanocache'

   s.expansion = '<meta http-equiv="Pragma" content="no-cache" />'

 end

 snippet 'meta_keywords' do |s|

   s.trigger = 'metakeywords'

   s.expansion = '<meta name="Keywords" content="$1"/>'

 end

 snippet 'meta_description' do |s|

   s.trigger = 'metadescription'

   s.expansion = '<meta name="Description" content="$1"/>'

 end

 snippet 'meta_viewport' do |s|

   s.trigger = 'metaviewport'

   s.expansion = '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />'

 end

 snippet 'script_google_jquery' do |s|

   s.trigger = 'scriptjqg'

   s.expansion = '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>'

 end

 snippet 'script_baidu_jquery' do |s|

   s.trigger = 'scriptjqb'

   s.expansion = '<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>'

 end

 snippet '<!--[if IE]>' do |s|

   s.trigger = 'ifie'

   s.expansion = '<!--[if IE]>

     $1

 <![endif]-->'

 end

 snippet '<!--[if lte IE 6]>' do |s|

   s.trigger = 'ifie6'

   s.expansion = '<!--[if lte IE 6]>

     $1

 <![endif]-->'

 end

 snippet '<select>...</select>' do |s|

   s.trigger = 'select'

   s.expansion = '<select name="$1">

     <option value="$2">$3</option>

 </select>'

 end

 snippet 'dl' do |s|

   s.trigger = 'dl'

   s.expansion = '<dl>

     <dt>$1</dt>

     <dd>$2</dd>

 </dl>'

 end

 snippet 'ul' do |s|

   s.trigger = 'ul'

   s.expansion = '<ul>

     <li>$1</li>

 </ul>'

 end

 snippet 'form' do |s|

   s.trigger = 'form'

   s.expansion = "<form action=\"$1\" method=\"${2:get}\">

     $0

     <input type=\"submit\" value=\"$3\"/>

 </form>"

     s.needApplyReContentAssist = true

 end

 snippet 'input_text' do |s|

   s.trigger = 'intext'

   s.expansion = '<input type="text" id="$1" value="$2" />'

   s.needApplyReContentAssist = true

 end

 snippet 'input_button' do |s|

   s.trigger = 'inbutton'

   s.expansion = '<input type="button" id="$1" value="$2" />'

   s.needApplyReContentAssist = true

 end

 snippet 'input_image' do |s|

   s.trigger = 'inimage'

   s.expansion = '<input type="image" src="$1" />'

   s.needApplyReContentAssist = true

 end

 snippet 'input_password' do |s|

   s.trigger = 'inpassword'

   s.expansion = '<input type="password" name="$1" />'

 end

 snippet 'input_search' do |s|

   s.trigger = 'insearch'

   s.expansion = '<input type="search" name="$1" required="$2" placeholder="Search" x-webkit-speech="$3" x-webkit-grammar="builtin:search" lang="zh-CN">'

 end

 snippet 'input_submit' do |s|

   s.trigger = 'insubmit'

   s.expansion = '<input type="submit" id="$1" name="$2" />'

 end

 snippet 'input_reset' do |s|

   s.trigger = 'inreset'

   s.expansion = '<input type="reset"/>'

 end

 snippet 'img' do |s|

   s.trigger = 'img'

   s.expansion = '<img src="$1"/>'

   s.needApplyReContentAssist = true

 end

 snippet 'a_link' do |s|

   s.trigger = 'al'

   s.expansion = '<a href="$1"></a>'

   s.needApplyReContentAssist = true

 end

 snippet 'a_mailto' do |s|

   s.trigger = 'am'

   s.expansion = '<a href="mailto:$1"></a>'

 end

 snippet 'video' do |s|

   s.trigger = 'video'

   s.expansion = '<video width="${1:800}" height="$2">

     <source src="${3:myvideo.mp4}" type="video/mp4"></source>

     <source src="${4:myvideo.ogv}" type="video/ogg"></source>

     <source src="${5:myvideo.webm}" type="video/webm"></source>

     <object width="$6" height="$7" type="application/x-shockwave-flash" data="${8:myvideo.swf}">

         <param name="movie" value="$8" />

         <param name="flashvars" value="autostart=true&amp;file=$8" />

     </object>

         当前浏览器不支持 video直接播放，点击这里下载视频： <a href="${9:myvideo.webm}">下载视频</a>

 </video>'

 end

 snippet t(:script_w_external_source) do |s|

   s.trigger = 'scsrc'

   s.expansion = '<script src="$1" type="text/javascript" charset="${3:utf-8}"></script>'

   s.needApplyReContentAssist = true

 end

 snippet 'Script' do |s|

   s.trigger = 'script'

   s.expansion = '<script type="text/javascript" charset="utf-8">

     $0

 </script>'

 end

 snippet 'style' do |s|

   s.trigger = 'style'

   s.expansion = '<style type="text/css">

     $0

 </style>'

 end

 snippet '<!DOCTYPE html>' do |s|

   s.trigger = 'doctype'

   s.expansion = '<!DOCTYPE HTML>'

 end

 snippet 'html' do |s|

   s.trigger = 'html'

   s.expansion = '<html>

     <head>

         <title>$0</title>

     </head>

     <body>

     </body>

 </html>'

 end

 snippet 'h1' do |s|

   s.trigger = 'h1'

   s.expansion = '<h1>$0</h1>'

 end

 snippet 'h2' do |s|

   s.trigger = 'h2'

   s.expansion = '<h2>$0</h2>'

 end

 snippet 'h3' do |s|

   s.trigger = 'h3'

   s.expansion = '<h3>$0</h3>'

 end

 snippet 'h4' do |s|

   s.trigger = 'h4'

   s.expansion = '<h4>$0</h4>'

 end

 snippet 'h5' do |s|

   s.trigger = 'h5'

   s.expansion = '<h5>$0</h5>'

 end

 snippet 'h6' do |s|

   s.trigger = 'h6'

   s.expansion = '<h6>$0</h6>'

 end

 snippet 'table' do |s|

   s.trigger = 'table'

   s.expansion = '<table border="$1" cellspacing="$2" cellpadding="$3">

     <tr><th>${4:Header}</th></tr>

     <tr><td>${5:Data}</td></tr>

 </table>'

 end

 snippet 'head' do |cmd|

     cmd.trigger = 'head'

     cmd.expansion = "<head>

     <meta charset=\"utf-8\"/>

     <title>$1</title>

 </head>"

 end

 snippet 'body' do |cmd|

     cmd.trigger = 'body'

     cmd.expansion = "<body>

     $0

 </body>"

 end

 snippet 'div' do |cmd|

     cmd.trigger = 'div'

     cmd.needApplyReContentAssist = true

     cmd.expansion = "<div class=\"$1\">

     $0

 </div>"

 end

 snippet 'span' do |cmd|

     cmd.trigger = 'span'

     cmd.needApplyReContentAssist = true

     cmd.expansion = "<span id=\"$1\">

     $0

 </span>"

 end

 snippet 'fieldset' do |cmd|

   cmd.trigger = 'fieldset'

   cmd.expansion = "<fieldset id=\"$2\">

     <legend>$1</legend>

     $0

 </fieldset>"

 end

 end # End Snippets with scope 'text.html text'

 # -----------------------------------------------------------------------------------

 # Snippets that used env vars and needed to be converted to commands

 with_defaults :scope => 'text.html - source', :input => :none, :output => :insert_as_snippet do |bundle|

   command t(:quick_br) do |cmd|

     cmd.key_binding = 'M2+ENTER'

     cmd.output = :insert_as_snippet

     cmd.input = :none

     cmd.invoke { "<br />" }

   end

   command t(:quick_html_space) do |cmd|

     cmd.key_binding = 'M2+SPACE'

     cmd.output = :insert_as_snippet

     cmd.input = :none

     cmd.invoke { "&nbsp;" }

   end

   command t(:emphasize) do |cmd|

     cmd.key_binding = 'M1+M2+I'

     cmd.input = :selection

     cmd.invoke do |context|

       selection = ENV['TM_SELECTED_TEXT'] || ''

       if selection.length > 0

         "<em>${1:#{selection}}</em>"

       else

         "<em>$0</em>"

       end

     end

   end

   command t(:strong) do |cmd|

     cmd.key_binding = 'M1+M2+B'

     cmd.input = :selection

     cmd.invoke do |context|

       selection = ENV['TM_SELECTED_TEXT'] || ''

       if selection.length > 0

         "<strong>${1:#{selection}}</strong>"

       else

         "<strong>$0</strong>"

       end

     end

   end

   command t(:wrap_selection_in_tag_pair) do |cmd|

     cmd.key_binding = "CONTROL+9"

     cmd.input = :selection

     cmd.invoke do |context|

       selection = ENV['TM_SELECTED_TEXT'] || ''

       if selection.length > 0

         "<${1:p}>#{selection.gsub('/', '\/')}</${1:p}>"

       else

         "<${1:p}>$0</${1:p}>"

       end

     end

   end

 end #end of 'text.html - source'

 with_defaults :scope => 'text.html text', :input => :none, :output => :insert_as_snippet do |bundle|

   command t(:ie_6_and_below) do |cmd|

     cmd.trigger = '!'

     cmd.invoke do |context|

       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 6 and below '

       "<!--[if lte IE 6]>${1:#{value}}<![endif]-->$0"

     end

   end

   command t(:ie_6) do |cmd|

     cmd.trigger = '!'

     cmd.invoke do |context|

       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : '     IE Conditional Comment: Internet Explorer 6 only   '

       "<!--[if IE 6]>${1:#{value}}<![endif]-->$0"

     end

   end

   command t(:ie_7_and_above) do |cmd|

     cmd.trigger = '!'

     cmd.invoke do |context|

       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 7 and above '

       "<!--[if gte IE 7]>${1:#{value}}<![endif]-->$0"

     end

   end

   command t(:ie_8_and_above) do |cmd|

     cmd.trigger = '!'

     cmd.invoke do |context|

       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 8 and above '

       "<!--[if gte IE 8]>${1:#{value}}<![endif]-->$0"

     end

   end

   command t(:ie_9_and_above) do |cmd|

     cmd.trigger = '!'

     cmd.invoke do |context|

       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : ' IE Conditional Comment: Internet Explorer 9 and above '

       "<!--[if gte IE 9]>${1:#{value}}<![endif]-->$0"

     end

   end

   command t(:ie) do |cmd|

     cmd.trigger = '!'

     cmd.invoke do |context|

       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : '       IE Conditional Comment: Internet Explorer          '

       "<!--[if IE]>${1:#{value}}<![endif]-->$0"

     end

   end

   command t(:not_ie) do |cmd|

     cmd.trigger = '!'

     cmd.invoke do |context|

       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : '  IE Conditional Comment: NOT Internet Explorer      '

       "<!--[if !IE]><!-->${1:#{value}}<!-- <![endif]-->$0"

     end

   end

   command t(:wrap_in_jsp_tag) do |cmd|

     cmd.scope = 'text.html string'

     cmd.invoke {|context| "<?= #{ENV['TM_SELECTED_TEXT']} ?>" }

   end

 end

HBuilder HTML 自定义代码块的更多相关文章

Hbuilder jQuery 自定义代码块
=begin 本文档是jquery代码块的编辑文件.修改其他的代码块,请在对应的激活代码助手点右下角的修改图标. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块如果要 ...
HBuilder js 自定义代码块
=begin 本文档是HBuilder预置的js代码块的文件.注意不要把其他语言的设置放到js里来. 如果用户修改此文档,HBuilder升级后会覆盖用户的修改,建议进入菜单工具→扩展代码块扩展相 ...
HBuilder CSS 自定义代码块
=begin 本文档是CSS代码块的编辑文件.注意不要把其他语言的设置放到css里来. HBuilder可使用ruby脚本来编辑代码块和增强操作命令. 1.编辑代码块如果要新增一个代码块,复制如下一 ...
Xcode自定义代码块
到现在才发现原来Xcode有自定义代码块这么神奇的功能,能简化很多无聊的敲重复代码的工作,真是感叹我怎么才知道!!! 具体的设置流程见:http://nshipster.cn/xcode-snippe ...
webstrom自定义代码块的设置方法
webstrom里面的自定义代码块叫做活动模版在文件 -> 设置 -> 编辑器 -> 活动模版可以打开里面的$var$ 代表一个变量两个相同的$var$在不全后可以同时修改, ...
IDE MAC下的快捷键,自定义代码块。
快捷键参考博客:http://blog.csdn.net/iguiyi/article/details/51853728 alt+f7查找在哪里使用相当于eclipse的ctrl+shift+G ...
vscode自定义代码块
vscode中设置自定义代码块打开首选项,选择用户代码片段,打开后选择编程语言选中后打开文件,按照格式编辑内容 "Print to console log": { "pr ...
vs2015常用代码块与自定义代码块
常用代码块代码段名描述 #if 该代码段用#if和#endif命令围绕代码 #region 该代码段用#region和#endregion命令围绕代码 ~ 该代码段插入一个析构函数 att ...
IDEA 自定义代码块
使用快捷键(ctrl+alt+s)找到:从idea的菜单File->Settings->Editor->Live Templates 先添加Template Group,然后添加Li ...

随机推荐

初步swift语言学习笔记8(保留了很多ＯＣ实现)
笔者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/32715833 转载请注明出处假设认为文章对你有所帮助,请通过留言 ...
C++ Primer 学习笔记_41_STL实践与分析（15）--先来看看算法【下一个】
STL实践与分析 --初窥算法[下] 一.写容器元素的算法一些算法写入元素值.在使用这些算法写元素时一定要当心.必须.写入输入序列的元素写入到输入序列的算法本质上是安全的--仅仅会写入与指定输入范 ...
这个夏天不AC(杭州电2037)
这个夏天不AC Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
大数据量传输时配置WCF的注意事项
原文:大数据量传输时配置WCF的注意事项 WCF传输数据量的能力受到许多因素的制约,如果程序中出现因需要传输的数据量较大而导致调用WCF服务失败的问题,应注意以下配置: 1.MaxReceivedMe ...
C++随机数的使用方法
学过别的高级语言的都知道,产生随机数用的都是相似于random这种字符,c++也不例外,在C++中使用的是rand()函数,可是不同的是,假设在C++中仅仅使用了比如 "int i ...
struts1吊牌<logic:iterate>
<logic:iterate>主要用于处理网页上的输出集合,集合是其中一般下列之一: 1. java对象的数组 2. ArrayList.Vector.HashMap等具体使用方法请參考 ...
POJ 3934 Queue(DP)
Queue Description Linda is a teacher in ACM kindergarten. She is in charge of n kids. Because the di ...
王立平--android特权
//同意应用程序访问和更改checkin数据库"properties"数据表 android.permission.ACCESS_CHECKIN_PROPERTIES //同意应用 ...
【iOS开展-50】使用它来创建一个新的类的实现代码包，因此，不自觉地练习简单MVC实验，附带动画
接下来说说代码封装最后一个个案. 最后一种情况看:[iOS开展-48]九宫格案例:自己主动布局.字典转模型运用.id和instancetype差别.xib反复视图运用及与nib关系 (1)代码封装的原 ...
C# 实现对接电信交费易自动缴费续(winio/winring0 自动填密码)
原文:C# 实现对接电信交费易自动缴费续(winio/winring0 自动填密码) 自动填密码大家可能都不莫生,最有名的应该是按键精灵只要是一个可以输入的地方都可以能过按键精灵来完成输入.我今 ...

HBuilder HTML 自定义代码块

HBuilder HTML 自定义代码块的更多相关文章

随机推荐

热门专题