Home > Backend Development > PHP Tutorial > Notepad++ installs Zen Coding / Emmet plug-in

Notepad++ installs Zen Coding / Emmet plug-in

WBOY
Release: 2016-07-29 09:14:43
Original
2919 people have browsed it

Zen Coding plug-in

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

Download: Zen.Coding-Notepad++.v0.7.zip

==Installation==

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

2. Restart Notepad++

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

Installation: Unzip the compressed package and copy the corresponding files (NppScripting.dll and NppScripting folder) to the plugins folder in the Notepad++ installation directory

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

Emmet plug-in

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

zen-Coding renamed Emmet, website: docs .emmet.io

Download: emmet-npp.zip

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

and 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).

( You can install Python Script through the Notepad++ Plugin

or directly download: PythonScript_1.0.8.0.msi for installation)

2. Download EmmetNPP plugin and unpack it into C:Program FilesNotepad++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%AppDataRoamingNotepad++pluginsconfigemmet folder and restart Notepad++.

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

If you encounter To:

Unknown exception

Python Script Plugin did not accept the script

Please refer to Notepad++ Emmet installation method tutorial

PythonScript_1.0.8.0.msi download

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

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

Notepad++ plug-inShortcut keysSettings

<span>!
 </span><span><!</span><span>doctype html</span><span>></span><span><</span><span>html </span><span>lang</span><span>="en"</span><span>></span><span><</span><span>head</span><span>></span><span><</span><span>meta </span><span>charset</span><span>="UTF-8"</span><span>></span><span><</span><span>title</span><span>></span>Document<span></</span><span>title</span><span>></span><span></</span><span>head</span><span>></span><span><</span><span>body</span><span>></span><span></</span><span>body</span><span>></span><span></</span><span>html</span><span>></span><span>
 html:4s
 </span><span><!</span><span>DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"</span><span>></span><span><</span><span>html </span><span>lang</span><span>="en"</span><span>></span><span><</span><span>head</span><span>></span><span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html;charset=UTF-8"</span><span>></span><span><</span><span>title</span><span>></span>Document<span></</span><span>title</span><span>></span><span></</span><span>head</span><span>></span><span><</span><span>body</span><span>></span><span></</span><span>body</span><span>></span><span></</span><span>html</span><span>></span><span>
 html:xs

</span><span><!</span><span>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span>></span><span><</span><span>html </span><span>xmlns</span><span>="http://www.w3.org/1999/xhtml"</span><span> xml:lang</span><span>="en"</span><span>></span><span><</span><span>head</span><span>></span><span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html;charset=UTF-8"</span><span>></span><span><</span><span>title</span><span>></span>Document<span></</span><span>title</span><span>></span><span></</span><span>head</span><span>></span><span><</span><span>body</span><span>></span><span></</span><span>body</span><span>></span><span></</span><span>html</span><span>></span><span>
#content.aticle.posts
 </span><span><</span><span>div </span><span>id</span><span>="content"</span><span> class</span><span>="aticle posts"</span><span>></</span><span>div</span><span>></span><span>
 ul#ccc.ddd
 </span><span><</span><span>ul </span><span>id</span><span>="ccc"</span><span> class</span><span>="ddd"</span><span>></span><span></</span><span>ul</span><span>></span><span>
div.aaa>ul>li
 </span><span><</span><span>div </span><span>class</span><span>="aaa"</span><span>></span><span><</span><span>ul</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span></</span><span>div</span><span>></span><span>
div>ul>li^^span
 </span><span><</span><span>div</span><span>></span><span><</span><span>ul</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>span</span><span>></</span><span>span</span><span>></span><span>
 div>ul>li^^div.clear
 </span><span><</span><span>div</span><span>></span><span><</span><span>ul</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>div </span><span>class</span><span>="clear"</span><span>></</span><span>div</span><span>></span><span>
div>ul>li*6
 </span><span><</span><span>div</span><span>></span><span><</span><span>ul</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span></</span><span>div</span><span>></span><span>
(div>dl>(dt+dl)*3)+footer>p
 </span><span><</span><span>div</span><span>></span><span><</span><span>dl</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span></</span><span>dl</span><span>></span><span></</span><span>div</span><span>></span><span><</span><span>footer</span><span>></span><span><</span><span>p</span><span>></</span><span>p</span><span>></span><span></</span><span>footer</span><span>></span><span>
div.banner>ul>li*2>((dt+dl)*3)+footer^^span

</span><span><</span><span>div </span><span>class</span><span>="banner"</span><span>></span><span><</span><span>ul</span><span>></span><span><</span><span>li</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>footer</span><span>></</span><span>footer</span><span>></span><span></</span><span>li</span><span>></span><span><</span><span>li</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>dt</span><span>></</span><span>dt</span><span>></span><span><</span><span>dl</span><span>></</span><span>dl</span><span>></span><span><</span><span>footer</span><span>></</span><span>footer</span><span>></span><span></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span><</span><span>span</span><span>></</span><span>span</span><span>></span><span></</span><span>div</span><span>></span><span>
a
 </span><span><</span><span>a </span><span>href</span><span>=""</span><span>></</span><span>a</span><span>></span><span>
a>{我是链接标题}
 </span><span><</span><span>a </span><span>href</span><span>=""</span><span>></span>我是链接标题<span></</span><span>a</span><span>></span><span>
link
 </span><span><</span><span>link </span><span>rel</span><span>="stylesheet"</span><span> href</span><span>=""</span><span>></span><span>
 ul>li.item$*5
 </span><span><</span><span>ul</span><span>></span><span><</span><span>li </span><span>class</span><span>="item1"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item2"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item3"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item4"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item5"</span><span>></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span> $ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:

ul>li.item$$*5

</span><span><</span><span>ul</span><span>></span><span><</span><span>li </span><span>class</span><span>="item01"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item02"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item03"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item04"</span><span>></</span><span>li</span><span>></span><span><</span><span>li </span><span>class</span><span>="item05"</span><span>></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span>
(header>ul.nav>li*5)+article+footer
 </span><span><</span><span>header</span><span>></span><span><</span><span>ul </span><span>class</span><span>="nav"</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span><</span><span>li</span><span>></</span><span>li</span><span>></span><span></</span><span>ul</span><span>></span><span></</span><span>header</span><span>></span><span><</span><span>article</span><span>></</span><span>article</span><span>></span><span><</span><span>footer</span><span>></</span><span>footer</span><span>></span>
Copy after login

The above introduces the installation of Zen Coding / Emmet plug-in for Notepad++, including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template