Notepad++安装Zen Codingt插件

Zen Coding介绍

    Zen Coding是一套面向文本编辑器的插件,它允许通过IDE工具的联想功能(内容辅助)高速度的编辑HTML、XML、XSL和其他结构化的代码格式。

    Zen Coding由Vadim Makeev发起,并由Sergey Chikuyonok发展而来,这套插件已经被许多文本编辑器采纳,如Eclipse、sublime text、NetBeans等。

     Zen Coidng由两大核心组件构成:一个是展开缩写功能和标签平衡功能。

 

功能

    展开缩写

    Zen Coding可以使用特定的语法展开小段代码,开发者只需编写小段代码,用快捷键Ctrl+E执行则可以生成完成的HTML代码,代码如下:

    html>(head>meta:utf+title+)+body>ul>li*4>{text$$}

    写完上述代码后,使用Ctrl+E快捷键展开代码,奇迹发生了...

   

    <!DOCTYPE html>

    <html>

           <head>

                  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

                     <title></title>

                 </head>

                  <body>

                         <ul>

                              <li>text01</li>

                              <li>text02</li>

                              <li>text03</li>

                              <li>text04</li>

                         </ul>

               </body>

       </html>

 

分析:虽然Zen Coding不具备Emmet的一小部分功能,但是用于开发足够了。

Notepad++安装Zen Codingt插件
Notepad++安装Zen Codingt插件

 

  1.  标签平衡

        HTML匹配器允许用户定位当前光标位置的标签下使用展开缩写功能,而不需从文件头部开始扫描

     

    分析:Zen Coding可以快速定位用户光标当前位置,并在该位置快速调用展开缩写功能,这意味着你可以在文档任何位置使用展开缩写功能,不需考虑文档内容多寡降低效率。

  2.  

    下载Zen Coding插件

      下载地址:https://pan.baidu.com/s/1dFKZNu5,下载Zen Coding插件,其中NppScripting文件夹和NppScripting.dll是要转义文件。

    Notepad++安装Zen Codingt插件
  3.  

    配置Notepad++的plugins

       将压缩包中NppScripting和NppScripting.dll文件复制到Notepad++的plugins文件内(如:D:\Notepad\plugins).

    Notepad++安装Zen Codingt插件
  4.  

    查看安装结果

    打开Notepad++工具栏看到“Zen Coding”说明安装成功。

    Notepad++安装Zen Codingt插件

转载于:https://www.cnblogs.com/qjuly/p/8892317.html

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢?嗯,首要原因是语义化:“选择器”意为选择一些东西,但是在这里我们事实上是生成 一些东西,是写一个长代码的较短的替代。其次,它只是使用真实的CSS选择器语法的一个小的子集,并添加了一些新的操作符。 这里是一个支持的属性和操作符的列表: E元素名称(div, p);E#id使用id的元素(div#content, p#intro, span#error);E.class使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;E>N子代元素(div>p, div#footer>p>span);E+N兄弟元素(h1+p, div#header+div#content+div#footer);E*N元素倍增(ul#nav>li*5>a);E$*N条目编号 (ul#nav>li.item-$*5);正如你能看到的,你已经知道如何使用Zen Coding了:只是些一个简单的仿CSS选择器。 元素类型Zen Coding有两个主要的元素类型:“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片,而缩写是标签定义。通过片段,你可以写出你想要的任何代码,它也会照你写的格式输出;但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方,就像这样:cc:ie6>style。如果你不使用${child}变量,子元素将会输出于代码片段的后面。 有了缩写,您必须编写标记定义,而且语法是非常重要的。通常,你必须写一个简单的带有所有默认的属性的标签,比如: <a href=”"></a>。当Zen Coding被加载后,它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以,如果你写<img src=”" alt=”" />,你会告诉Zen Coding这个标签必须是空的,然后“扩展缩写”行为就会在输出之前为它使用特定的规则。 对于片段和缩写,你可以添加一个管道符号,它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的,Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值