Notepad++安裝ZenCoding/Emmet插件

2019-11-14 14:45:35

字體：大中小

來源：轉載

供稿：網友

Zen Coding 插件

==============

下載： Zen.Coding-Notepad++.v0.7.zip

==Installation==

1. Copy contents of this archive into Notepad++ 'plugins' folder (basically, it's C:/PRogram Files/Notepad++/plugins/)

2. Restart Notepad++

You should see "Zen Coding" menu item in top menu.

安裝：解壓壓縮包，復制相應文件（NppScripting.dll及NppScripting文件夾）到Notepad++安裝目錄下的plugins文件夾下

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

Emmet 插件

============

zen-Coding改名Emmet，網站：docs.emmet.io

下載： emmet-npp.zip

https://github.com/emmetio/npp#readme

及 PythonScript_1.0.8.0.msi

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:

write HTML code with CSS-like abbreviations, use different actions to quickly select and modify HTML and CSS code and more!

==Installation==

Plugin manager

This plugin is available via Plugin Manager: use Plugins > Plugin Manager > Show Plugin Manager menu action and find and install “Emmet” plugin.

Manual installation

1.Install Python Script plugin (available in Plugin Manager).

（可以通過Notepad++的Plugin安裝Python Script

或直接下載：PythonScript_1.0.8.0.msi進行安裝）

2.Download EmmetNPP plugin and unpack it into C:/Program Files/Notepad++/plugins folder Start Nodepad++.

You should see Plugins > Emmet menu item.

==Changing keyboard shortcuts==

You can use default Settings > Shortcut Mapper… dialog to change action’s keyboard shortcuts.

plugin commands 》Expand abbreviation

Try to map Tab key to Expand Abbreviation action to improve your experience.

Extensions support

Emmet for Notepad++ supports extensions:

put all your .js and .json files into %USER%/AppData/Roaming/Notepad++/plugins/config/emmet folder and restart Notepad++.

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

如果遇到：

Unknown exception

Python Script Plugin did not accept the script

可參看 Notepad++ Emmet安裝方法教程

PythonScript_1.0.8.0.msi 下載

http://sourceforge.net/projects/npppythonscript/files/Python%20Script%201.0.8.0/PythonScript_1.0.8.0.msi/download

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

Notepad++插件快捷鍵設置

! <!doctype html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body>   </body> </html> html:4s <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <title>Document</title> </head> <body>   </body> </html> html:xs<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <title>Document</title> </head> <body>   </body> </html>#content.aticle.posts <div id="content" class="aticle posts"></div> ul#ccc.ddd <ul id="ccc" class="ddd"> </ul>div.aaa>ul>li <div class="aaa">  <ul>   <li></li>  </ul> </div>div>ul>li^^span <div>  <ul>   <li></li>  </ul> </div> <span></span> div>ul>li^^div.clear <div>  <ul>   <li></li>  </ul> </div> <div class="clear"></div>div>ul>li*6 <div>  <ul>   <li></li>   <li></li>   <li></li>   <li></li>   <li></li>   <li></li>  </ul> </div>(div>dl>(dt+dl)*3)+footer>p <div>  <dl>   <dt></dt>   <dl></dl>   <dt></dt>   <dl></dl>   <dt></dt>   <dl></dl>  </dl> </div> <footer>  <p></p> </footer>div.banner>ul>li*2>((dt+dl)*3)+footer^^span<div class="banner">  <ul>   <li>    <dt></dt>    <dl></dl>    <dt></dt>    <dl></dl>    <dt></dt>    <dl></dl>    <footer></footer>   </li>   <li>    <dt></dt>    <dl></dl>    <dt></dt>    <dl></dl>    <dt></dt>    <dl></dl>    <footer></footer>   </li>  </ul>  <span></span> </div>a <a href=""></a>a>{我是鏈接標題} <a href="">我是鏈接標題</a>link <link rel="stylesheet" href=""> ul>li.item$*5 <ul>  <li class="item1"></li>  <li class="item2"></li>  <li class="item3"></li>  <li class="item4"></li>  <li class="item5"></li> </ul> $ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那么要寫三個 $：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>(header>ul.nav>li*5)+article+footer <header>  <ul class="nav">   <li></li>   <li></li>   <li></li>   <li></li>   <li></li>  </ul> </header> <article></article> <footer></footer>