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 end
102 
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 end
107 
108 snippet t(:option) do |s|
109   s.trigger = 'opt'
110   s.expansion = '<option value="${1:option}">${1:option}</option>'
111 end
112 
113 snippet 'input' do |s|
114   s.trigger = 'input'
115   s.expansion = '<input type="$1" name="$2" id="$2" value="$3" />'
116   s.needApplyReContentAssist = true
117 end
118 
119 snippet 'textarea' do |s|
120   s.trigger = 'textarea'
121   s.expansion = '<textarea name="$1" rows="$2" cols="$3">$0</textarea>'
122 end
123 
124 snippet 'canvas' do |s|
125   s.trigger = 'canvas'
126   s.expansion = '<canvas id="$1" width="$2" height="$3"></canvas>'
127 end
128 
129 snippet 'iframe' do |s|
130   s.trigger = 'iframe'
131   s.expansion = '<iframe src="$1" width="$2" height="$3"></canvas>'
132   s.needApplyReContentAssist = true
133 end
134 
135 snippet t(:nbsp) do |s|
136   s.key_binding = 'OPTION+Space'
137   s.expansion = '&nbsp;'
138 end
139 
140 snippet 'Br' do |s|
141   s.key_binding = 'CONTROL+ENTER'
142   s.expansion = '<br/>'
143 end
144 
145 snippet 'link' do |s|
146   s.trigger = 'link'
147   s.expansion = '<link rel="stylesheet" type="text/css" href="$1"/>'
148   s.needApplyReContentAssist = true
149 end
150 
151 snippet 'meta' do |s|
152   s.trigger = 'meta'
153   s.needApplyReContentAssist = true
154   s.expansion = '<meta name="$1" content="$2"/>'
155 end
156 
157 snippet 'meta_UTF8' do |s|
158   s.trigger = 'metautf'
159   s.expansion = '<meta charset="UTF-8"/>'
160 end
161 
162 snippet 'meta_GB2312' do |s|
163   s.trigger = 'metagb'
164   s.expansion = '<meta charset="GB2312"/>'
165 end
166 
167 snippet 'meta_nocache' do |s|
168   s.trigger = 'metanocache'
169   s.expansion = '<meta http-equiv="Pragma" content="no-cache" />'
170 end
171 
172 snippet 'meta_keywords' do |s|
173   s.trigger = 'metakeywords'
174   s.expansion = '<meta name="Keywords" content="$1"/>'
175 end
176 
177 snippet 'meta_description' do |s|
178   s.trigger = 'metadescription'
179   s.expansion = '<meta name="Description" content="$1"/>'
180 end
181 
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 end
186 
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 end
191 
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 end
196 
197 snippet '<!--[if IE]>' do |s|
198   s.trigger = 'ifie'
199   s.expansion = '<!--[if IE]>
200     $1
201 <![endif]-->'
202 end
203 
204 snippet '<!--[if lte IE 6]>' do |s|
205   s.trigger = 'ifie6'
206   s.expansion = '<!--[if lte IE 6]>
207     $1
208 <![endif]-->'
209 end
210 
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 end
217 
218 snippet 'dl' do |s|
219   s.trigger = 'dl'
220   s.expansion = '<dl>
221     <dt>$1</dt>
222     <dd>$2</dd>
223 </dl>'
224 end
225 
226 snippet 'ul' do |s|
227   s.trigger = 'ul'
228   s.expansion = '<ul>
229     <li>$1</li>
230 </ul>'
231 end
232 
233 snippet 'form' do |s|
234   s.trigger = 'form'
235   s.expansion = "<form action=\"$1\" method=\"${2:get}\">
236     $0
237     <input type=\"submit\" value=\"$3\"/>
238 </form>"
239     s.needApplyReContentAssist = true
240 end
241 
242 snippet 'input_text' do |s|
243   s.trigger = 'intext'
244   s.expansion = '<input type="text" id="$1" value="$2" />'
245   s.needApplyReContentAssist = true
246 end
247 
248 snippet 'input_button' do |s|
249   s.trigger = 'inbutton'
250   s.expansion = '<input type="button" id="$1" value="$2" />'
251   s.needApplyReContentAssist = true
252 end
253 
254 snippet 'input_image' do |s|
255   s.trigger = 'inimage'
256   s.expansion = '<input type="image" src="$1" />'
257   s.needApplyReContentAssist = true
258 end
259 
260 snippet 'input_password' do |s|
261   s.trigger = 'inpassword'
262   s.expansion = '<input type="password" name="$1" />'
263 end
264 
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 end
269 
270 snippet 'input_submit' do |s|
271   s.trigger = 'insubmit'
272   s.expansion = '<input type="submit" id="$1" name="$2" />'
273 end
274 
275 snippet 'input_reset' do |s|
276   s.trigger = 'inreset'
277   s.expansion = '<input type="reset"/>'
278 end
279 
280 snippet 'img' do |s|
281   s.trigger = 'img'
282   s.expansion = '<img src="$1"/>'
283   s.needApplyReContentAssist = true
284 end
285 
286 snippet 'a_link' do |s|
287   s.trigger = 'al'
288   s.expansion = '<a href="$1"></a>'
289   s.needApplyReContentAssist = true
290 end
291 
292 snippet 'a_mailto' do |s|
293   s.trigger = 'am'
294   s.expansion = '<a href="mailto:$1"></a>'
295 end
296 
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&amp;file=$8" />
306     </object>
307         当前浏览器不支持 video直接播放，点击这里下载视频： <a href="${9:myvideo.webm}">下载视频</a>
308 </video>'
309 end
310 
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 = true
315 end
316 
317 snippet 'Script' do |s|
318   s.trigger = 'script'
319   s.expansion = '<script type="text/javascript" charset="utf-8">
320     $0
321 </script>'
322 end
323 
324 snippet 'style' do |s|
325   s.trigger = 'style'
326   s.expansion = '<style type="text/css">
327     $0
328 </style>'
329 end
330 
331 snippet '<!DOCTYPE html>' do |s|
332   s.trigger = 'doctype'
333   s.expansion = '<!DOCTYPE HTML>'
334 end
335 
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 end
347 
348 snippet 'h1' do |s|
349   s.trigger = 'h1'
350   s.expansion = '<h1>$0</h1>'
351 end
352 
353 snippet 'h2' do |s|
354   s.trigger = 'h2'
355   s.expansion = '<h2>$0</h2>'
356 end
357 
358 snippet 'h3' do |s|
359   s.trigger = 'h3'
360   s.expansion = '<h3>$0</h3>'
361 end
362 
363 snippet 'h4' do |s|
364   s.trigger = 'h4'
365   s.expansion = '<h4>$0</h4>'
366 end
367 
368 snippet 'h5' do |s|
369   s.trigger = 'h5'
370   s.expansion = '<h5>$0</h5>'
371 end
372 
373 snippet 'h6' do |s|
374   s.trigger = 'h6'
375   s.expansion = '<h6>$0</h6>'
376 end
377 
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 end
385 
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 end
394 
395 snippet 'body' do |cmd|
396     cmd.trigger = 'body'
397     cmd.expansion = "<body>
398     $0
399 </body>"
400 end
401 
402 snippet 'div' do |cmd|
403     cmd.trigger = 'div'
404     cmd.needApplyReContentAssist = true
405     cmd.expansion = "<div class=\"$1\">
406     $0
407 </div>"        
408 end
409 
410 snippet 'span' do |cmd|
411     cmd.trigger = 'span'
412     cmd.needApplyReContentAssist = true
413     cmd.expansion = "<span id=\"$1\">
414     $0
415 </span>"        
416 end
417 
418 snippet 'fieldset' do |cmd|
419   cmd.trigger = 'fieldset'
420   cmd.expansion = "<fieldset id=\"$2\">
421     <legend>$1</legend>
422     
423     $0
424 </fieldset>"
425 end
426 
427 end # End Snippets with scope 'text.html text'
428 
429 # -----------------------------------------------------------------------------------
430 # Snippets that used env vars and needed to be converted to commands
431 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_snippet
436     cmd.input = :none
437     cmd.invoke { "<br />" }
438   end
439     
440   command t(:quick_html_space) do |cmd|
441     cmd.key_binding = 'M2+SPACE'
442     cmd.output = :insert_as_snippet
443     cmd.input = :none
444     cmd.invoke { "&nbsp;" }
445   end
446 
447   command t(:emphasize) do |cmd|
448     cmd.key_binding = 'M1+M2+I'
449     cmd.input = :selection
450     cmd.invoke do |context|
451       selection = ENV['TM_SELECTED_TEXT'] || ''
452       if selection.length > 0
453         "<em>${1:#{selection}}</em>"
454       else
455         "<em>$0</em>"
456       end
457     end
458   end
459   
460   command t(:strong) do |cmd|
461     cmd.key_binding = 'M1+M2+B'
462     cmd.input = :selection
463     cmd.invoke do |context|
464       selection = ENV['TM_SELECTED_TEXT'] || ''
465       if selection.length > 0
466         "<strong>${1:#{selection}}</strong>"
467       else
468         "<strong>$0</strong>"
469       end
470     end
471   end
472   
473   command t(:wrap_selection_in_tag_pair) do |cmd|
474     cmd.key_binding = "CONTROL+9"
475     cmd.input = :selection
476     cmd.invoke do |context|
477       selection = ENV['TM_SELECTED_TEXT'] || ''
478       if selection.length > 0
479         "<${1:p}>#{selection.gsub('/', '\/')}</${1:p}>"
480       else
481         "<${1:p}>$0</${1:p}>"
482       end
483     end
484   end
485 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 = (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     end
494   end
495   
496   command t(:ie_6) do |cmd|
497     cmd.trigger = '!'
498     cmd.invoke do |context|
499       value = (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     end
502   end
503   
504   command t(:ie_7_and_above) do |cmd|
505     cmd.trigger = '!'
506     cmd.invoke do |context|
507       value = (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     end
510   end
511   
512   command t(:ie_8_and_above) do |cmd|
513     cmd.trigger = '!'
514     cmd.invoke do |context|
515       value = (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     end
518   end
519   
520   command t(:ie_9_and_above) do |cmd|
521     cmd.trigger = '!'
522     cmd.invoke do |context|
523       value = (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     end
526   end
527   
528   command t(:ie) do |cmd|
529     cmd.trigger = '!'
530     cmd.invoke do |context|
531       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : '       IE Conditional Comment: Internet Explorer          '
532       "<!--[if IE]>${1:#{value}}<![endif]-->$0"
533     end
534   end
535   
536   command t(:not_ie) do |cmd|
537     cmd.trigger = '!'
538     cmd.invoke do |context|
539       value = (ENV['TM_SELECTED_TEXT'] || '').length > 0 ? ENV['TM_SELECTED_TEXT'] : '  IE Conditional Comment: NOT Internet Explorer      '
540       "<!--[if !IE]><!-->${1:#{value}}<!-- <![endif]-->$0"
541     end
542   end
543   
544   command t(:wrap_in_jsp_tag) do |cmd|
545     cmd.scope = 'text.html string'
546     cmd.invoke {|context| "<?= #{ENV['TM_SELECTED_TEXT']} ?>" }
547   end
548 end
posted @ 2014-12-26 10:49 Xpress 阅读(13829) 评论(0) 收藏举报
刷新页面返回顶部
Xpress

HBuilder HTML 自定义代码块

公告
