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

 

你可能感兴趣的:(builder)