notepad++ sublime emmet

安裝 emmet,  python script外掛

設定 > 快速鍵管理>  plugin command
更改 Expand Abbreviation 快速鍵

參考資料:

https://teddysun.com/254.html

!   +  快速鍵    快速生成 HTML語法

含id  class屬性

div#ccc.ddd

階層式

div.aaa>ul>li

同階層

div+p+bq

數量

ul>li*5

分組生成

div>(header>ul>li*2>a)+footer>p

效果:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

自動編號

ul>li.item$$*5

效果：

<ul>
 <li class="item01"></li>
 <li class="item02"></li>
 <li class="item03"></li>
 <li class="item04"></li>
 <li class="item05"></li>
</ul>

a[href="http://loeric9.blogspot.tw"]>{Loeric's misc blog}+b{ya}

效果：<a href="http://loeric9.blogspot.tw">Loeric's misc blog<b>Ya</b></a>




<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

Lorem Ipsum 隨機生成文字。
lorem12


中文版的亂數假文產生器
修改emmet-app.js  (notepad++ : C:\Program Files (x86)\Notepad++\plugins\EmmetNPP\emmet  )
新增tw 物件
tw: { 
common: ['過黨','有現真好。學愛故','天林性如白兩石','不間知室勢成','往法提就一遊'],
words: [ '過輕黨','有現真多好。學愛故','天越林性他如白兩石','不間知室勢成','往法提就一遊','事好來本善不滿海','我如如五作你當','夫裡門對！仍下山歡世,位了地客']

},


然後修改 prefs.define()函式中lorem.defaultLang  屬性 把’en’改成上面我們定義的’tw’

程式碼如下：
prefs.define('lorem.defaultLang', 'tw');


如果想要每次觸發lorem的字都不一樣 （n=你想要的字數），可以把common那一行刪掉。

參考資料:
http://www.deartet.com/29516/%E5%A6%82%E4%BD%95%E8%A3%BD%E4%BD%9C%E4%B8%AD%E6%96%87%E7%9A%84lorem-ipsum-%E5%81%87%E6%96%87%E7%94%A2%E7%94%9F%E5%99%A8

--------------------------------------------------

在Style區段:
 @f+ 即可生成 CSS3 中的 font-face 

@font-face {
 font-family: 'FontName';
 src: url('FileName.eot');
 src: url('FileName.eot?#iefix') format('embedded-opentype'),
 url('FileName.woff') format('woff'),
 url('FileName.ttf') format('truetype'),
 url('FileName.svg#FontName') format('svg');
 font-style: normal;
 font-weight: normal;
}

參考資料:

http://blog.wpjam.com/m/emmet-grammar/