首页 > 代码库 > HBuilder HTML 自定义代码块
HBuilder HTML 自定义代码块
1 =begin 2 本文档是HTML代码块的编辑文件。注意不要把其他语言的设置放到html里来。 3 HBuilder可使用ruby脚本来编辑代码块和增强操作命令。 4 1、编辑代码块 5 如果要新增一个代码块，复制如下一段代码到空白行，然后设定参数。 6 ‘Style‘是代码块的显示名字； 7 s.trigger = ‘style‘ 是设定激活字符，比如输入style均会在代码提示时显示该代码块； 8 s.expansion = ‘‘ 是设定该代码块的输出字符，其中$0、$1是光标的停留和切换位置。 9 snippet ‘Style‘ do |s| 10 s.trigger = ‘style‘ 11 s.expansion = ‘<style type="text/css" media="screen"> 12 $0 13 </style>‘ 14 end 15 以上以HTML代码块做示例，js和css代码块类似，使用时注意避免混淆 16 2、编辑按键命令 17 如果要新增一个按键操作命令，复制如下一段代码到空白行，然后设定参数。 18 ‘Br‘是命令名字； 19 s.key_binding = ‘CONTROL+ENTER‘ 是设定按什么快捷键可以触发这个命令； 20 s.expansion = ‘<br/>‘ 是设定输出字符。 21 snippet ‘Br‘ do |s| 22 s.key_binding = ‘CONTROL+ENTER‘ 23 s.expansion = ‘<br/>‘ 24 end 25 操作时注意冲突，注意备份，有问题就还原。 26 多看看已经写的ruby命令，会发现更多强大技巧。 27 修改完毕，需要重启才能生效。 28 玩的愉快，别玩坏！ 29 脚本开源地址 https://github.com/dcloudio/HBuilderRubyBundle ，可以把你的配置共享到这里，也可以在这里获取其他网友的版本 30 =end 31 32 require ‘ruble‘ 33 34 with_defaults :scope => ‘text.html entity.other.attribute-name.html‘ do |bundle| 35 36 snippet ‘data-‘ do |s| 37 s.trigger = ‘data-‘ 38 s.expansion=‘data-${1:type/role/transition/icon/iconpos/*} = "$2"‘ 39 s.locationType=‘HTML_ATTRIBUTE‘ 40 end 41 42 end 43 44 with_defaults :scope => ‘text.html text‘ do |bundle| 45 46 snippet t(:html_4_strict) do |s| 47 s.trigger = ‘doctype‘ 48 s.expansion = ‘<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 49 "http://www.w3.org/TR/html4/strict.dtd"> 50 ‘ 51 end 52 53 snippet t(:xhtml_1_frameset) do |s| 54 s.trigger = ‘doctype‘ 55 s.expansion = ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 56 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 57 ‘ 58 end 59 60 snippet t(:xhtml_1_strict) do |s| 61 s.trigger = ‘doctype‘ 62 s.expansion = ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 63 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 64 ‘ 65 end 66 67 snippet t(:xhtml_1_transitional) do |s| 68 s.trigger = ‘doctype‘ 69 s.expansion = ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 70 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 71 ‘ 72 end 73 74 snippet t(:xhtml_11) do |s| 75 s.trigger = ‘doctype‘ 76 s.expansion = ‘<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 77 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 78 ‘ 79 end 80 81 snippet t(:movie) do |s| 82 s.trigger = ‘movie‘ 83 s.expansion = ‘<object width="${2:320}" height="${3:240}" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> 84 <param name="src" value="${1:movie.mov}"/> 85 <param name="controller" value="${4:true}"/> 86 <param name="autoplay" value="${5:true}"/> 87 <embed src="${1:movie.mov}" 88 width="${2:320}" height="${3:240}" 89 controller="${4:true}" autoplay="${5:true}" 90 scale="tofit" cache="true" 91 pluginspage="http://www.apple.com/quicktime/download/" 92 ></embed> 93 </object>‘ 94 end 95 96 snippet t(:html_4_transitional) do |s| 97 s.trigger = ‘doctype‘ 98 s.expansion = ‘<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 99 "http://www.w3.org/TR/html4/loose.dtd">100 ‘101 end102 103 snippet ‘input with label‘ do |s|104 s.trigger = ‘input‘105 s.expansion = ‘<label for="$2">$1</label><input type="${3:text/submit/hidden/button}" name="$2" value="$5" id="$2"/>‘106 end107 108 snippet t(:option) do |s|109 s.trigger = ‘opt‘110 s.expansion = ‘<option value="${1:option}">${1:option}</option>‘111 end112 113 snippet ‘input‘ do |s|114 s.trigger = ‘input‘115 s.expansion = ‘<input type="$1" name="$2" id="$2" value="$3" />‘116 s.needApplyReContentAssist = true117 end118 119 snippet ‘textarea‘ do |s|120 s.trigger = ‘textarea‘121 s.expansion = ‘<textarea name="$1" rows="$2" cols="$3">$0</textarea>‘122 end123 124 snippet ‘canvas‘ do |s|125 s.trigger = ‘canvas‘126 s.expansion = ‘<canvas id="$1" width="$2" height="$3"></canvas>‘127 end128 129 snippet ‘iframe‘ do |s|130 s.trigger = ‘iframe‘131 s.expansion = ‘<iframe src="$1" width="$2" height="$3"></canvas>‘132 s.needApplyReContentAssist = true133 end134 135 snippet t(:nbsp) do |s|136 s.key_binding = ‘OPTION+Space‘137 s.expansion = ‘ ‘138 end139 140 snippet ‘Br‘ do |s|141 s.key_binding = ‘CONTROL+ENTER‘142 s.expansion = ‘<br/>‘143 end144 145 snippet ‘link‘ do |s|146 s.trigger = ‘link‘147 s.expansion = ‘<link rel="stylesheet" type="text/css" href="$1"/>‘148 s.needApplyReContentAssist = true149 end150 151 snippet ‘meta‘ do |s|152 s.trigger = ‘meta‘153 s.needApplyReContentAssist = true154 s.expansion = ‘<meta name="$1" content="$2"/>‘155 end156 157 snippet ‘meta_UTF8‘ do |s|158 s.trigger = ‘metautf‘159 s.expansion = ‘<meta charset="UTF-8"/>‘160 end161 162 snippet ‘meta_GB2312‘ do |s|163 s.trigger = ‘metagb‘164 s.expansion = ‘<meta charset="GB2312"/>‘165 end166 167 snippet ‘meta_nocache‘ do |s|168 s.trigger = ‘metanocache‘169 s.expansion = ‘<meta http-equiv="Pragma" content="no-cache" />‘170 end171 172 snippet ‘meta_keywords‘ do |s|173 s.trigger = ‘metakeywords‘174 s.expansion = ‘<meta name="Keywords" content="$1"/>‘175 end176 177 snippet ‘meta_description‘ do |s|178 s.trigger = ‘metadescription‘179 s.expansion = ‘<meta name="Description" content="$1"/>‘180 end181 182 snippet ‘meta_viewport‘ do |s|183 s.trigger = ‘metaviewport‘184 s.expansion = ‘<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />‘185 end186 187 snippet ‘script_google_jquery‘ do |s|188 s.trigger = ‘scriptjqg‘189 s.expansion = ‘<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>‘190 end191 192 snippet ‘script_baidu_jquery‘ do |s|193 s.trigger = ‘scriptjqb‘194 s.expansion = ‘<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>‘195 end196 197 snippet ‘<!--[if IE]>‘ do |s|198 s.trigger = ‘ifie‘199 s.expansion = ‘<!--[if IE]>200 $1201 <![endif]-->‘202 end203 204 snippet ‘<!--[if lte IE 6]>‘ do |s|205 s.trigger = ‘ifie6‘206 s.expansion = ‘<!--[if lte IE 6]>207 $1208 <![endif]-->‘209 end210 211 snippet ‘<select>...</select>‘ do |s|212 s.trigger = ‘select‘213 s.expansion = ‘<select name="$1">214 <option value="$2">$3</option>215 </select>‘216 end217 218 snippet ‘dl‘ do |s|219 s.trigger = ‘dl‘220 s.expansion = ‘<dl>221 <dt>$1</dt>222 <dd>$2</dd>223 </dl>‘224 end225 226 snippet ‘ul‘ do |s|227 s.trigger = ‘ul‘228 s.expansion = ‘<ul>229 <li>$1</li>230 </ul>‘231 end232 233 snippet ‘form‘ do |s|234 s.trigger = ‘form‘235 s.expansion = "<form action=\"$1\" method=\"${2:get}\">236 $0237 <input type=\"submit\" value=\"$3\"/>238 </form>"239 s.needApplyReContentAssist = true240 end241 242 snippet ‘input_text‘ do |s|243 s.trigger = ‘intext‘244 s.expansion = ‘<input type="text" id="$1" value="$2" />‘245 s.needApplyReContentAssist = true246 end247 248 snippet ‘input_button‘ do |s|249 s.trigger = ‘inbutton‘250 s.expansion = ‘<input type="button" id="$1" value="$2" />‘251 s.needApplyReContentAssist = true252 end253 254 snippet ‘input_image‘ do |s|255 s.trigger = ‘inimage‘256 s.expansion = ‘<input type="image" src="$1" />‘257 s.needApplyReContentAssist = true258 end259 260 snippet ‘input_password‘ do |s|261 s.trigger = ‘inpassword‘262 s.expansion = ‘<input type="password" name="$1" />‘263 end264 265 snippet ‘input_search‘ do |s|266 s.trigger = ‘insearch‘267 s.expansion = ‘<input type="search" name="$1" required="$2" placeholder="Search" x-webkit-speech="$3" x-webkit-grammar="builtin:search" lang="zh-CN">‘268 end269 270 snippet ‘input_submit‘ do |s|271 s.trigger = ‘insubmit‘272 s.expansion = ‘<input type="submit" id="$1" name="$2" />‘273 end274 275 snippet ‘input_reset‘ do |s|276 s.trigger = ‘inreset‘277 s.expansion = ‘<input type="reset"/>‘278 end279 280 snippet ‘img‘ do |s|281 s.trigger = ‘img‘282 s.expansion = ‘<img src="$1"/>‘283 s.needApplyReContentAssist = true284 end285 286 snippet ‘a_link‘ do |s|287 s.trigger = ‘al‘288 s.expansion = ‘<a href="$1"></a>‘289 s.needApplyReContentAssist = true290 end291 292 snippet ‘a_mailto‘ do |s|293 s.trigger = ‘am‘294 s.expansion = ‘<a href="mailto:$1"></a>‘295 end296 297 snippet ‘video‘ do |s|298 s.trigger = ‘video‘299 s.expansion = ‘<video width="${1:800}" height="$2">300 <source src="${3:myvideo.mp4}" type="video/mp4"></source>301 <source src="${4:myvideo.ogv}" type="video/ogg"></source>302 <source src="${5:myvideo.webm}" type="video/webm"></source>303 <object width="$6" height="$7" type="application/x-shockwave-flash" data="${8:myvideo.swf}">304 <param name="movie" value="$8" />305 <param name="flashvars" value="autostart=true&file=$8" />306 </object>307 当前浏览器不支持 video直接播放，点击这里下载视频： <a href="${9:myvideo.webm}">下载视频</a>308 </video>‘309 end310 311 snippet t(:script_w_external_source) do |s|312 s.trigger = ‘scsrc‘313 s.expansion = ‘<script src="$1" type="text/javascript" charset="${3:utf-8}"></script>‘314 s.needApplyReContentAssist = true315 end316 317 snippet ‘Script‘ do |s|318 s.trigger = ‘script‘319 s.expansion = ‘<script type="text/javascript" charset="utf-8">320 $0321 </script>‘322 end323 324 snippet ‘style‘ do |s|325 s.trigger = ‘style‘326 s.expansion = ‘<style type="text/css">327 $0328 </style>‘329 end330 331 snippet ‘<!DOCTYPE html>‘ do |s|332 s.trigger = ‘doctype‘333 s.expansion = ‘<!DOCTYPE HTML>‘334 end335 336 snippet ‘html‘ do |s|337 s.trigger = ‘html‘338 s.expansion = ‘<html>339 <head>340 <title>$0</title>341 </head>342 <body>343 344 </body>345 </html>‘346 end347 348 snippet ‘h1‘ do |s|349 s.trigger = ‘h1‘350 s.expansion = ‘<h1>$0</h1>‘351 end352 353 snippet ‘h2‘ do |s|354 s.trigger = ‘h2‘355 s.expansion = ‘<h2>$0</h2>‘356 end357 358 snippet ‘h3‘ do |s|359 s.trigger = ‘h3‘360 s.expansion = ‘<h3>$0</h3>‘361 end362 363 snippet ‘h4‘ do |s|364 s.trigger = ‘h4‘365 s.expansion = ‘<h4>$0</h4>‘366 end367 368 snippet ‘h5‘ do |s|369 s.trigger = ‘h5‘370 s.expansion = ‘<h5>$0</h5>‘371 end372 373 snippet ‘h6‘ do |s|374 s.trigger = ‘h6‘375 s.expansion = ‘<h6>$0</h6>‘376 end377 378 snippet ‘table‘ do |s|379 s.trigger = ‘table‘380 s.expansion = ‘<table border="$1" cellspacing="$2" cellpadding="$3">381 <tr><th>${4:Header}</th></tr>382 <tr><td>${5:Data}</td></tr>383 </table>‘384 end385 386 snippet ‘head‘ do |cmd|387 cmd.trigger = ‘head‘388 cmd.expansion = "<head>389 <meta charset=\"utf-8\"/>390 <title>$1</title>391 392 </head>"393 end394 395 snippet ‘body‘ do |cmd|396 cmd.trigger = ‘body‘397 cmd.expansion = "<body>398 $0399 </body>"400 end401 402 snippet ‘div‘ do |cmd|403 cmd.trigger = ‘div‘404 cmd.needApplyReContentAssist = true405 cmd.expansion = "<div class=\"$1\">406 $0407 </div>" 408 end409 410 snippet ‘span‘ do |cmd|411 cmd.trigger = ‘span‘412 cmd.needApplyReContentAssist = true413 cmd.expansion = "<span id=\"$1\">414 $0415 </span>" 416 end417 418 snippet ‘fieldset‘ do |cmd|419 cmd.trigger = ‘fieldset‘420 cmd.expansion = "<fieldset id=\"$2\">421 <legend>$1</legend>422 423 $0424 </fieldset>"425 end426 427 end # End Snippets with scope ‘text.html text‘428 429 # -----------------------------------------------------------------------------------430 # Snippets that used env vars and needed to be converted to commands431 with_defaults :scope => ‘text.html - source‘, :input => :none, :output => :insert_as_snippet do |bundle|432 433 command t(:quick_br) do |cmd|434 cmd.key_binding = ‘M2+ENTER‘435 cmd.output = :insert_as_snippet436 cmd.input = :none437 cmd.invoke { "<br />" }438 end439 440 command t(:quick_html_space) do |cmd|441 cmd.key_binding = ‘M2+SPACE‘442 cmd.output = :insert_as_snippet443 cmd.input = :none444 cmd.invoke { " " }445 end446 447 command t(:emphasize) do |cmd|448 cmd.key_binding = ‘M1+M2+I‘449 cmd.input = :selection450 cmd.invoke do |context|451 selection = ENV[‘TM_SELECTED_TEXT‘] || ‘‘452 if selection.length > 0453 "<em>${1:#{selection}}</em>"454 else455 "<em>$0</em>"456 end457 end458 end459 460 command t(:strong) do |cmd|461 cmd.key_binding = ‘M1+M2+B‘462 cmd.input = :selection463 cmd.invoke do |context|464 selection = ENV[‘TM_SELECTED_TEXT‘] || ‘‘465 if selection.length > 0466 "<strong>${1:#{selection}}</strong>"467 else468 "<strong>$0</strong>"469 end470 end471 end472 473 command t(:wrap_selection_in_tag_pair) do |cmd|474 cmd.key_binding = "CONTROL+9"475 cmd.input = :selection476 cmd.invoke do |context|477 selection = ENV[‘TM_SELECTED_TEXT‘] || ‘‘478 if selection.length > 0479 "<${1:p}>#{selection.gsub(‘/‘, ‘\/‘)}</${1:p}>"480 else481 "<${1:p}>$0</${1:p}>"482 end483 end484 end485 end #end of ‘text.html - source‘486 487 with_defaults :scope => ‘text.html text‘, :input => :none, :output => :insert_as_snippet do |bundle|488 command t(:ie_6_and_below) do |cmd|489 cmd.trigger = ‘!‘490 cmd.invoke do |context|491 value = http://www.mamicode.com/(ENV[‘TM_SELECTED_TEXT‘] || ‘‘).length > 0 ? ENV[‘TM_SELECTED_TEXT‘] : ‘ IE Conditional Comment: Internet Explorer 6 and below ‘>492 "<!--[if lte IE 6]>${1:#{value}}<![endif]-->$0"493 end494 end495 496 command t(:ie_6) do |cmd|497 cmd.trigger = ‘!‘498 cmd.invoke do |context|499 value = http://www.mamicode.com/(ENV[‘TM_SELECTED_TEXT‘] || ‘‘).length > 0 ? ENV[‘TM_SELECTED_TEXT‘] : ‘ IE Conditional Comment: Internet Explorer 6 only ‘>500 "<!--[if IE 6]>${1:#{value}}<![endif]-->$0"501 end502 end503 504 command t(:ie_7_and_above) do |cmd|505 cmd.trigger = ‘!‘506 cmd.invoke do |context|507 value = http://www.mamicode.com/(ENV[‘TM_SELECTED_TEXT‘] || ‘‘).length > 0 ? ENV[‘TM_SELECTED_TEXT‘] : ‘ IE Conditional Comment: Internet Explorer 7 and above ‘>508 "<!--[if gte IE 7]>${1:#{value}}<![endif]-->$0"509 end510 end511 512 command t(:ie_8_and_above) do |cmd|513 cmd.trigger = ‘!‘514 cmd.invoke do |context|515 value = http://www.mamicode.com/(ENV[‘TM_SELECTED_TEXT‘] || ‘‘).length > 0 ? ENV[‘TM_SELECTED_TEXT‘] : ‘ IE Conditional Comment: Internet Explorer 8 and above ‘>516 "<!--[if gte IE 8]>${1:#{value}}<![endif]-->$0"517 end518 end519 520 command t(:ie_9_and_above) do |cmd|521 cmd.trigger = ‘!‘522 cmd.invoke do |context|523 value = http://www.mamicode.com/(ENV[‘TM_SELECTED_TEXT‘] || ‘‘).length > 0 ? ENV[‘TM_SELECTED_TEXT‘] : ‘ IE Conditional Comment: Internet Explorer 9 and above ‘>524 "<!--[if gte IE 9]>${1:#{value}}<![endif]-->$0"525 end526 end527 528 command t(:ie) do |cmd|529 cmd.trigger = ‘!‘530 cmd.invoke do |context|531 value = http://www.mamicode.com/(ENV[‘TM_SELECTED_TEXT‘] || ‘‘).length > 0 ? ENV[‘TM_SELECTED_TEXT‘] : ‘ IE Conditional Comment: Internet Explorer ‘>532 "<!--[if IE]>${1:#{value}}<![endif]-->$0"533 end534 end535 536 command t(:not_ie) do |cmd|537 cmd.trigger = ‘!‘538 cmd.invoke do |context|539 value = http://www.mamicode.com/(ENV[‘TM_SELECTED_TEXT‘] || ‘‘).length > 0 ? ENV[‘TM_SELECTED_TEXT‘] : ‘ IE Conditional Comment: NOT Internet Explorer ‘>540 "<!--[if !IE]><!-->${1:#{value}}<!-- <![endif]-->$0"541 end542 end543 544 command t(:wrap_in_jsp_tag) do |cmd|545 cmd.scope = ‘text.html string‘546 cmd.invoke {|context| "<?= #{ENV[‘TM_SELECTED_TEXT‘]} ?>" }547 end548 end
HBuilder HTML 自定义代码块
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。