zoukankan      html  css  js  c++  java
  • Notepad++ 安装 Zen Coding / Emmet 插件

    Zen Coding 插件

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

    下载: 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.

    安装: 解压压缩包, 复制相应文件(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 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++.

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

    如果遇到:

    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>
  • 相关阅读:
    封装一个php语言的api提示类
    Content-Type四种常见取值
    postman中 form-data、x-www-form-urlencoded、raw、binary的区别
    ansible find
    Linux系统中根目录下或者新挂载的磁盘目录下有一个叫lost+found,它的作用是什么?
    rm /mv需要注意的
    mount
    es number_of_shards和number_of_replicas
    logstash设置配置路径
    ES7.8 设置 xpack
  • 原文地址:https://www.cnblogs.com/freeliver54/p/4832351.html
Copyright © 2011-2022 走看看