美文网首页
HBuilder 自定义html代码块

HBuilder 自定义html代码块

作者: TIGER_XXXX | 来源:发表于2017-09-11 21:58 被阅读297次

点击后会打开一个ruby文件,下面是官方关于自定义html代码块的说明

#如下是一个示例代码块,可以复制后再添加新代码块
  snippet 'div_class' do |cmd|  #div_class是显示名称,代码助手提示列表显示时可见
    cmd.trigger = 'divc'        #divc是激活字符,即按下divc后会触发该代码块
    cmd.expansion = "<div class=\"$1\">
    $0
</div>"                         #expansion是代码块的输出内容,其中$0、$1是光标的停留和切换位置。$1是第一个停留光标,$0是最后回车时停留的光标。
                                                          #如果输出涉及到换行和tab,也需严格在这里使用换行和tab。
                                                          #输出双引号在前面加\来转义,输出$使用\$(单引号中)或\\$(双引号中)转义
    cmd.needApplyReContentAssist = true  #这句话的意思是输出后同时激活代码助手,即在$1的位置直接拉出样式列表
  end #div_class代码块结束

这里需要注意两点

  • 在用$标识光标位置时还可以设置一个默认值,格式是${1:默认}
  snippet 'c-test' do |cmd|
    cmd.trigger = 'ctest'
    cmd.expansion = '<div>
    ${1:test}
</div>'
  end
  • 文档中说修改完这个ruby文件后只要保存就可以了,但是我没有成功过,都是需要重启HBuilder才行,测试环境为macOS Sierra

相关文章

  • HBuilder 自定义html代码块

    点击后会打开一个ruby文件,下面是官方关于自定义html代码块的说明 这里需要注意两点 在用$标识光标位置时还可...

  • Mac环境下的HBuilder安装

    HBuilder是DCloud数字天堂推出的一款支持HTML5开发IDE,通过完整的语法提示和代码输入法、代码块等...

  • hbuilder添加代码块

    工具-》代码块设置=》vue设置 2.复制hello的common文件夹到当前项目下3.在app.vue 引入

  • #Xcode自定义代码块

    Xcode自定义代码块 如下图,为Xcode保存的代码块(包括自定义的,自定义的有个User的下标) 选中代码块 ...

  • iOS Xcode自定义代码块以及迁移

    iOS Xcode自定义代码块以及迁移 iOS Xcode自定义代码块以及迁移

  • Xcode自定义代码块

    代码块的好处 自定义代码块的入口 代码块的迁移 1、好处在于方便快速 2、如何实现自定义代码块 如图所示选中要自定...

  • Xcode 10自定义代码块

    选中要自定义的代码块,右键,点击Create Code Snippet,就可以自定义代码块了

  • iOS Code Snippet Library 自定义代码段

    CodeSnippet Xcode自定义代码块,让开发更加效率 你可以在Xcode中自定义自己的代码块,设置自己习...

  • iOS Xcode自定义代码块以及迁移

    文中将要介绍以下四点内容 代码块的意义 自定义代码块入口 代码块迁移 代码块的编写 一 . 意义在于节约时间成本 ...

  • 1.Hbuilder的代码块设置

    #此处为方春高自己定义的代码块,主要是为了方便操作 # 消息框 =========================...

网友评论

      本文标题:HBuilder 自定义html代码块

      本文链接:https://www.haomeiwen.com/subject/vafqsxtx.html