├── README.md
├── relativize.py
└── src
├── documents
├── abbreviations
│ ├── implicit-names
│ │ └── index.html.md
│ ├── index.html.md
│ ├── lorem-ipsum
│ │ └── index.html.md
│ ├── syntax
│ │ └── index.html.md
│ └── types
│ │ └── index.html.md
├── actions
│ ├── base64
│ │ └── index.html.md
│ ├── evaluate-math
│ │ └── index.html.md
│ ├── expand-abbreviation
│ │ └── index.html.md
│ ├── go-to-edit-point
│ │ └── index.html.md
│ ├── go-to-pair
│ │ └── index.html.md
│ ├── inc-dec-number
│ │ └── index.html.md
│ ├── index.html.md
│ ├── match-pair
│ │ └── index.html.md
│ ├── merge-lines
│ │ └── index.html.md
│ ├── reflect-css-value
│ │ └── index.html.md
│ ├── remove-tag
│ │ └── index.html.md
│ ├── select-item
│ │ └── index.html.md
│ ├── split-join-tag
│ │ └── index.html.md
│ ├── toggle-comment
│ │ └── index.html.md
│ ├── update-image-size
│ │ └── index.html.md
│ └── wrap-with-abbreviation
│ │ └── index.html.md
├── cheat-sheet
│ └── index.html
├── css-abbreviations
│ ├── fuzzy-search
│ │ └── index.html.md
│ ├── gradients
│ │ └── index.html.md
│ ├── index.html.md
│ └── vendor-prefixes
│ │ └── index.html.md
├── customization
│ ├── index.html.md
│ ├── preferences
│ │ └── index.html.md
│ ├── snippets
│ │ └── index.html.md
│ └── syntax-profiles
│ │ └── index.html.md
├── filters
│ ├── bem
│ │ └── index.html.md
│ └── index.html.md
└── index.html.md
├── files
└── css
│ └── assets
│ └── _layout.css
└── layouts
├── default.html.eco
└── page.html.eco
/README.md:
--------------------------------------------------------------------------------
1 | # Emmet 文档
2 |
3 | Emmet 文档中文翻译。
4 |
5 | 官方文档：[网站](http://docs.emmet.io/) [源码](https://github.com/emmetio/emmet-docs/)
6 |
7 | - 对样式做了些调整。
8 | - 页面生成后运行 relativize.py，将所有 index.html 里的绝对路径转为相对路径。可能存在问题。
9 |
10 | ## 版权
11 |
12 | 翻译版权 CC BY 3.0 CN
--------------------------------------------------------------------------------
/relativize.py:
--------------------------------------------------------------------------------
1 | #!/bin/python
2 | # -*- coding: utf-8 -*-
3 | # Ivan Yan
4 | # 2013-10-11
5 | # Relativize absolute paths in emmet-docs
6 |
7 | from __future__ import unicode_literals
8 |
9 | import os
10 | import re
11 |
12 | def relativize(filename, rel):
13 | old = open(filename).read().decode('utf-8')
14 | # href="/..." src="/..."
15 | def repl(matchobj):
16 | return matchobj.group(1) + '="' + rel + '/'
17 | new = re.sub(r'(href|src)="/(?!/)', repl, old)
18 | if new != old:
19 | open(filename, 'wb').write(new.encode('utf-8'))
20 |
21 | def main(dirname):
22 | rootpath = os.path.abspath(dirname)
23 | for root, dirs, files in os.walk(rootpath):
24 | for dirname in dirs:
25 | curdir = os.path.abspath(os.path.join(root, dirname))
26 | index = os.path.join(curdir, 'index.html')
27 | if dirname != 'codemirror-movie' and os.path.exists(index):
28 | print(curdir)
29 | rel = os.path.relpath(rootpath, curdir).replace('\\', '/')
30 | # print(rel)
31 | relativize(index, rel)
32 |
33 | if __name__ == '__main__':
34 | relativize('out/index.html', '.')
35 | main('out')
--------------------------------------------------------------------------------
/src/documents/abbreviations/implicit-names/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 隐式标签名
4 | menuOrder: 3
5 | ---
6 | Even with such a powerful abbreviation engine, which can expand large HTML structures from short abbreviation, writing tag names may be very tedious.
7 |
8 | 尽管可以利用强大的缩写引擎从简短的缩写展开大段的 HTML，但是书写标签仍然可能让人烦。
9 |
10 | In many cases you can skip typing tag names and Emmet will substitute it for you. For example, instead of `div.content` you can simply write `.content` and expand it into ``.
11 |
12 | 在许多情况下可以省略标签名，Emmet 会妥善处理。比如不写 `div.content` 而写 `.content`，可以展开为 ``。
13 |
14 | ## How it works 工作原理
15 |
16 | When you expand abbreviation, Emmet tries to grab parent context, e.g. the HTML element, inside which you’re expanding the abbreviation. If the context was grabbed successfully, Emmet uses its name to resolve implicit names:
17 |
18 | 当展开缩写时，Emmet 尝试获取缩写所处位置的父元素上下文，比如 HTML 元素。如果获取成功，Emmet 使用它的名字来解析隐式标签名：
19 |
20 |
49 |
50 | As you can see from the example above, Emmet looks at the parent tag name every time you’re expanding the abbreviation with an implicit name. Here’s how it resolves the names for some parent elements:
51 |
52 | 如你所见，当展开隐式标签名时 Emmet 查找父元素标签名。下面是 Emmet 解析机制：
53 |
54 | * `li` for `ul` and `ol`
55 | * `tr` for `table`, `tbody`, `thead` and `tfoot`
56 | * `td` for `tr`
57 | * `option` for `select` and `optgroup`
58 |
59 | Take a look at some abbreviations equivalents with implicit and explicit tag names:
60 |
61 | 下面缩写隐式与显式标签名输出一致：
62 |
63 |
64 |
65 |
`.wrap>.content`
66 |
`div.wrap>div.content`
67 |
68 |
69 |
`em>.info`
70 |
`em>span.info`
71 |
72 |
73 |
`ul>.item*3`
74 |
`ul>li.item*3`
75 |
76 |
77 |
`table>#row$*4>[colspan=2]`
78 |
`table>tr#row$*4>td[colspan=2]`
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/src/documents/abbreviations/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 缩写
4 | menuOrder: 1
5 | ---
6 | Abbreviations are the heart of the Emmet toolkit: these special expressions are parsed in runtime and transformed into structured code block, HTML for example. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation. So every web-developer already knows how to use it.
7 |
8 | 缩写是 Emmet 的核心：这些特殊的表达式被实时的解析转化为代码块。缩写的语法类似于 CSS 选择器，每个网页开发者都知道怎么用。
9 |
10 | Here’s an example: this abbreviation
11 |
12 | 例如这个缩写：
13 |
14 | #page>div.logo+ul#navigation>li*5>a{Item $}
15 |
16 | ...can be transformed into
17 |
18 |
28 |
29 | ...with just a single key stroke. In many editors (such as Eclipse, Sublime Text 2, Espresso etc.) plugins will also generate proper _tabstop marks_ so you can quickly traverse between important places of generated code with the Tab key.
30 |
31 | 许多编辑器（比如 Eclipse, Sublime Text 2, Espresso 等） 的插件也生成插入占位，使用 Tab 键可以快捷在这些重要的地方跳转。
32 |
33 | Abbreviations are optimised for, but not limited to, HTML and XML generation, and make writing tedious markup code a breeze. You can start learning [syntax](/abbreviations/syntax/) to unleash the full power of Emmet abbreviations.
34 |
35 | 缩写最适合于生成 HTML/XML，但是不限于此。下面开始学习[语法](/abbreviations/syntax/)来了解 Emmet 缩写的强大。
--------------------------------------------------------------------------------
/src/documents/abbreviations/lorem-ipsum/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: “Lorem Ipsum” 生成器
4 | menuOrder: 4
5 | ---
6 | [“Lorem ipsum”](http://www.lipsum.com) dummy text is used by many web-developers to test how their HTML templates will look with real data. Often, developers use third-party services to generate “Lorem ipsum” text, but now you can do that right in your editor. Just expand `lorem` or `lipsum` abbreviations to get the following snippet:
7 |
8 | [“Lorem ipsum”](http://www.lipsum.com) 假文，许多开发者用它来测试 HTML 模板填充数据后的样子。开发者常常用第三方服务来生成假文，不过现在在编辑器里就能做到，只用展开 `lorem` 或 `lipsum` ：
9 |
10 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?
11 |
12 | `lorem` is not just a normal snippet—it’s actually a _generator_. Every time you expand it, it will generate a 30-words dummy text, splitted into a few sentences.
13 |
14 | `lorem` 不是普通的代码片断——它是一个 **生成器**。每次展开将生成 30 字数的假文，分为几个句子。
15 |
16 | You can specify how many words should be generated right in the abbreviation. For example, `lorem100` will generate a 100-words dummy text.
17 |
18 | 可以指定字数。比如 `lorem100` 将生成 100 字数的假文。
19 |
20 | ## Repeated “Lorem ipsum”重复假文
21 |
22 | You can use `lorem` generator inside repeated elements to create tags filled with completely random sentences. For example, `p*4>lorem` abbreviation would generate something like this:
23 |
24 | 在重复元素内使用 `lorem` 填充随机文本。比如 `p*4>lorem`：
25 |
26 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
27 |
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!
28 |
Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!
29 |
Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?
30 |
31 | Also, `lorem` generator utilizes the [implicit tag name resolver](/abbreviations/implicit-names/) when `lorem` element is self-repeated so you can shorten your abbreviations:
32 |
33 | `lorem` 也能 [解析隐式标签名](/abbreviations/implicit-names/)。当只重复 `lorem` 时可以简化缩写：
34 |
35 | `ul.generic-list>lorem10.item*4`
36 |
37 | ...will produce
38 |
39 |
40 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.
41 |
Laboriosam quaerat sapiente minima nam minus similique illum architecto et!
42 |
Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!
43 |
Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!
44 |
45 |
46 |
--------------------------------------------------------------------------------
/src/documents/abbreviations/syntax/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 缩写语法
4 | menuTitle: 语法
5 | menuOrder: 1
6 | ---
7 | Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes.
8 |
9 | Emmet 使用类似于 CSS 选择器的语法来描述元素的结构与属性。
10 |
11 | ## Elements 元素
12 |
13 | You can use elements’ names like `div` or `p` to _generate_ HTML tags. Emmet doesn’t have a predefined set of available tag names, you can write any word and transform it into a tag: `div` → ``, `foo` → `` and so on.
14 |
15 | 使用元素的名字，比如 `div`、 `p` 来生成 HTML 标签。 Emmet 没有预定义标签集合，所以可以用任意单词来生成对应的标签：`div` → ``, `foo` → ``
16 |
17 | ## Nesting operators 嵌套操作符
18 |
19 | Nesting operators are used to position abbreviation elements inside generated tree: whether it should be placed inside or near the context element.
20 |
21 | ### Child: `>` 子元素
22 |
23 | You can use `>` operator to nest elements inside each other:
24 |
25 | div>ul>li
26 |
27 | ...will produce
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | ### Sibling: `+` 兄弟元素
36 |
37 | Use `+` operator to place elements near each other, on the same level:
38 |
39 | div+p+bq
40 |
41 | ...will output
42 |
43 |
44 |
45 |
46 |
47 | ### Climb-up: `^` 返回上层
48 |
49 | With `>` operator you’re descending down the generated tree and positions of all sibling elements will be resolved against the most deepest element:
50 |
51 | `>` 操作符加深结构层次：
52 |
53 | div+div>p>span+em
54 |
55 | ...will be expanded to
56 |
57 |
58 |
59 |
60 |
61 |
62 | With `^` operator, you can climb one level up the tree and change context where following elements should appear:
63 |
64 | `>` 操作符返回上一层：
65 |
66 | div+div>p>span+em^bq
67 |
68 | ...outputs to
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | You can use as many `^` operators as you like, each operator will move one level up:
77 |
78 | 多个`^`连写将向上一层层返回：
79 |
80 | div+div>p>span+em^^^bq
81 |
82 | ...will output to
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | ### Multiplication: `*` 乘法
91 |
92 | With `*` operator you can define how many times element should be outputted:
93 |
94 | ul>li*5
95 |
96 | ...outputs to
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 | ### Grouping: `()` 分组
107 |
108 | Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:
109 |
110 | div>(header>ul>li*2>a)+footer>p
111 |
112 | ...expands to
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
124 |
125 |
126 | If you’re working with browser’s DOM, you may think of groups as Document Fragments: each group contains abbreviation subtree and all the following elements are inserted at the same level as the first element of group.
127 |
128 | 可以将分组当作 Document Fragments，后续元素将与分组第一个元素同级。
129 |
130 | You can nest groups inside each other and combine them with multiplication `*` operator:
131 |
132 | 分组嵌套，并且使用 `*` 操作法：
133 |
134 | (div>dl>(dt+dd)*3)+footer>p
135 |
136 | ...produces
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
151 |
152 | With groups, you can literally write full page mark-up with a single abbreviation, but please don’t do that.
153 |
154 | 使用分组后，可以用一个缩写来生成整个页面，不过不要这么做。
155 |
156 | ## Attribute operators 属性操作符
157 |
158 | Attribute operators are used to modify attributes of outputted elements. For example, in HTML and XML you can quickly add `class` attribute to generated element.
159 |
160 | ### ID and CLASS
161 |
162 | In CSS, you use `elem#id` and `elem.class` notation to reach the elements with specified `id` or `class` attributes. In Emmet, you can use the very same syntax to _add_ these attributes to specified element:
163 |
164 | Emmet 使用类似于 CSS 选择器的语法给元素添加属性：
165 |
166 | div#header+div.page+div#footer.class1.class2.class3
167 |
168 | ...will output
169 |
170 |
171 |
172 |
173 |
174 | ### Custom attributes 自定义属性
175 |
176 | You can use `[attr]` notation (as in CSS) to add custom attributes to your element:
177 |
178 | td[title="Hello world!" colspan=3]
179 |
180 | ...outputs
181 |
182 |
183 |
184 | * You can place as many attributes as you like inside square brackets.
185 | * 方括号内属性数量不限。
186 | * You don’t have to specify attribute values: `td[colspan title]` will produce `
` with tabstops inside each empty attribute (if your editor supports them).
187 | * 没有指定值的属性将生成插入占位（需要编辑器支持）。
188 | * You can use single or double quotes for quoting attribute values.
189 | * 属性值使用单引号或双引号。
190 | * You don’t need to quote values if they don’t contain spaces: `td[title=hello colspan=3]` will work.
191 | * 属性值如果不包含空格可以省略引号。
192 |
193 | ### Item numbering: `$` 编号
194 |
195 | With multiplication `*` operator you can repeat elements, but with `$` you can _number_ them. Place `$` operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element:
196 |
197 | `*` 操作符可以生成重复元素，而 `$` 可以对元素编号。将 `$` 放在元素名、属性名或属性值中：
198 |
199 | ul>li.item$*5
200 |
201 | ...outputs to
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 | You can use multiple `$` in a row to pad number with zeroes:
212 |
213 | 多个连写的 `$` 可以生成带有前导零的编号：
214 |
215 | ul>li.item$$$*5
216 |
217 | ...outputs to
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 | #### Changing numbering base and direction
228 |
229 | With `@` modifier, you can change numbering direction (ascending or descending) and base (e.g. start value).
230 |
231 | 使用 `@` 修饰符，可以改变编号的方向（升序或降序）及起点。
232 |
233 | For example, to change direction, add `@-` after `$`:
234 |
235 | 例如改变方向，将 `@-` 放在 `$` 后：
236 |
237 | ul>li.item$@-*5
238 |
239 | …outputs to
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 | To change counter base value, add `@N` modifier to `$`:
250 |
251 | 改变起点，将 `@N` 放在 `$` 后：
252 |
253 | ul>li.item$@3*5
254 |
255 | …transforms to
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 | You can use these modifiers together:
266 |
267 | 混合使用这几种修饰符：
268 |
269 | ul>li.item$@-3*5
270 |
271 | …is transformed to
272 |
273 |
'`，不能匹配标签。
--------------------------------------------------------------------------------
/src/documents/actions/merge-lines/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 合并行
4 | menuOrder: 9
5 | ---
6 | Many editors have similar action: it merges selected lines into a single one. But when there’s no selection, Emmet will match context HTML tag.
7 |
8 | 许多编辑器有类似功能：将选中的多行合并为单行。不过如果没有选择，Emmet 将匹配所在 HTML 标签。
9 |
10 |
20 |
--------------------------------------------------------------------------------
/src/documents/actions/reflect-css-value/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 重构 CSS 值
4 | menuOrder: 13
5 | ---
6 | A very useful action for CSS developers: it takes value of CSS property under caret and copies it into vendor-prefixed variations with additional transformations, if required.
7 |
8 | 对 CSS 开发很实用的功能： 将插入符所在的 CSS 属性值复制给带厂商前缀的属性中。
9 |
10 |
--------------------------------------------------------------------------------
/src/documents/actions/remove-tag/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 删除标签
4 | menuOrder: 8
5 | ---
6 | Quickly removes tag, found by “[Match Tag Pair](/actions/match-pair/)” from current caret position, and adjusts indentation.
7 |
8 | 快速删除标签，并调整缩进。这里的标签是在插入符所在位置由 [匹配标签](/actions/match-pair/) 功能查找的标签。
9 |
10 |
25 |
26 | ----------------
27 |
28 | “Remove Tag” action uses “[HTML Matcher](/actions/match-pair/)” internally so it may work in non-HTML syntaxes too.
29 |
30 | 这个功能在内部调用 [匹配标签](/actions/match-pair/) 功能，所以非 HTML 语法也可以用。
--------------------------------------------------------------------------------
/src/documents/actions/select-item/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 选择
4 | menuOrder: 5
5 | ---
6 | Action is similar to [“Go to Edit Point”](/actions/go-to-edit-point/), but selects important code parts.
7 |
8 | 这个功能类似于[编辑点间移动](/actions/go-to-edit-point/)功能，但是选择重要的代码部分。
9 |
10 | In HTML, these are tag name, full attribute and attribute value. For class attribute it also selects distinct classes.
11 |
12 | 对于 HTML，选择标签名，完整的属性与属性值。对于 class 属性也选择不同的 class。
13 |
14 |
32 |
33 | In CSS, it matches selector, full property and property value. For complex values and functions like `1px solid red` or `url(image.jpg)` also selects part of it.
34 |
35 | 对于 CSS，选择选择器，完整的属性与属性值。对于复杂的值比如 `1px solid red` 或 `url(image.jpg)` 也选择子部分。
36 |
37 |
--------------------------------------------------------------------------------
/src/documents/actions/split-join-tag/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 分割合并标签
4 | menuOrder: 7
5 | ---
6 | This action splits and joins tag definition, e.g. converts from `` to `` and vice versa. Very useful for XML/XSL developers.
7 |
8 | 这个功能分割合并标签，例如将`` 转换为 `` ，或逆操作。对于 XML/XSL 开发很有用。
9 |
10 |
21 |
22 | ----------------
23 |
24 | “Split/Join Tag” action uses “[HTML Matcher](/actions/match-pair/)” internally so it may work in non-HTML syntaxes too.
25 |
26 | 这个功能在内部调用 [匹配标签](/actions/match-pair/) 功能，所以非 HTML 语法也可以用。
27 |
--------------------------------------------------------------------------------
/src/documents/actions/toggle-comment/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 切换注释
4 | menuOrder: 6
5 | ---
6 | This action, as name says, toggle comment on selection. Almost all programmer’s text editors have such action, but this one works differently. When there’s no selection, editor’s action toggles comment on current line while Emmet’s one do this on _current context_. For HTML it’s a full tag, for CSS it’s a rule or full property.
7 |
8 | 这个功能，如名字所示，注释或取消注释选中内容。几乎所有的程序员编辑器都有这样的功能，但是这个不同。当没有选择时，编辑器切换当前行的注释，而 Emmet 切换当前上下文的注释。对于 HTML 是整个标签内容，对于 CSS 是一条规则或整个属性。
9 |
10 |
30 |
--------------------------------------------------------------------------------
/src/documents/actions/update-image-size/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 更新图片尺寸
4 | menuOrder: 10
5 | ---
6 | Many web-developers forget to write _width_ and _height_ attributes for `` tags which leads to poor UX. This action helps you to automate this process: simply place caret inside `` tag and run this action to add/update width and height attributes.
7 |
8 | 许多开发者忘记给 `` 标签添加 _width_ 与 _height_ 属性，这样对用户体验不好。这个功能自动帮你搞定：将插入符放在 `` 标签内，然后调用此功能，就可以添加或更新 width 与 height 属性。
9 |
10 | In CSS, place caret inside property value with `url()` function to add/update width and height properties for current rule.
11 |
12 | 对于 CSS，将插入符放在属性值 `url()` 内，然后调用此功能，就可以添加或更新 width 与 height 属性。
13 |
14 |
32 |
33 | Note that this action also works for absolute URLs: it will start searching for requested file from host file’s folder and then will traverse up the tree.
34 |
35 | 注意此功能对绝对 URL 路径也适用：从宿主文件所在目录开始查找文件，然后沿着目录结构向上查找。
--------------------------------------------------------------------------------
/src/documents/actions/wrap-with-abbreviation/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 包裹缩写
4 | menuOrder: 3
5 | ---
6 | A very powerful tool of the Emmet toolkit. It takes an [abbreviation](/abbreviations/), expands it and places currently selected content in the last element of generated snippet. If there’s no selection, action will silently call [“Match Tag Pair”](/actions/match-pair/) to wrap context element.
7 |
8 | 这是 Emmet 的一个强大工具，展开[缩写](/abbreviations/)，并将选中的内容放在最后生成的元素内。如果没有选择，则调用[匹配标签](/actions/match-pair/)功能，包裹匹配的元素。
9 |
10 |
19 |
20 | ## Wrapping individual lines 分行包裹
21 |
22 | Very commonly, web-developers will need to wrap text in HTML tags. For example, you may receive a text document from your client and need to wrap each paragraph with `
` 结构包裹菜单项。
25 |
26 | From [syntax](/abbreviations/syntax/) you’ve learned that you can repeat element with multiplication operator, like this: `ul>li*5`. You can use the very same operator to _mark repeating element_, e.g. tell Emmet that marked element should be repeated by the number of wrapped lines.
27 |
28 | 从[语法](/abbreviations/syntax/)可知，使用乘法操作法重复元素，像这样 `ul>li*5`。对标记元素可以使用与此很类似的操作，标记元素将以选中的行数重复。
29 |
30 |
49 |
50 | Note you don’t need to add multiplier number for wrapping lines (e.g. `li*5`), you have to use `*` operator _without_ number, like this: `li*`.
51 |
52 | 注意不需要添加乘数 (e.g. `li*5`)，使用 `*` 时不能添加乘数，像这样：`li*`。
53 |
54 | ## Removing list markers 删除列表标记
55 |
56 | Whenever you copy text from, let’s say, Microsoft Word, you’ll have list blocks like this:
57 |
58 | 比如说从 Microsoft Word 中复制列表：
59 |
60 | * Unordered item 1
61 | * Unordered item 2
62 | * Unordered item 3
63 |
64 | 1. Ordered item 1
65 | 2. Ordered item 2
66 | 3. Ordered item 3
67 |
68 | If you try to wrap these lists with `ul>li*` abbreviation, you will get something like this:
69 |
70 | 如果用 `ul>li*` 缩写包裹这些列表，结果：
71 |
72 |
73 |
* Unordered item 1
74 |
* Unordered item 2
75 |
* Unordered item 3
76 |
77 |
78 | This is not very convenient because you have to manually remove list markers.
79 |
80 | 不是很方便，得手工删除列表标记。
81 |
82 | You can let Emmet do this for you: simply add “trim“ (`|t`, pipe-t) filter to abbreviation to automatically remove list markers from wrapped content:
83 |
84 | Emmet 可以帮你：给缩写添加删除过滤器(`|t`)，将自动删除列表标记：
85 |
86 |
105 |
106 | [Read more about filters](/filters/)
107 |
108 | ## Controlling output position 控制插入位置
109 |
110 | By default, when you wrap something, Emmet puts original content inside the latest element. You can control the output position with `$#` placeholder. Note that `$#` is not part of the abbreviation syntax, so you have to put it inside the attribute value or [text node](/abbreviations/syntax/), like this: `ul>li[title=$#]*>{$#}+img[alt=$#]`.
111 |
112 | Emmet 默认将选中内容放在最后生成的元素内。可以用 `$#` 控制插入位置。注意 `$#` 不属于缩写语法，将它放在属性值或[文本节点](/abbreviations/syntax/)内，像这样：`ul>li[title=$#]*>{$#}+img[alt=$#]`。
113 |
114 |
--------------------------------------------------------------------------------
/src/documents/cheat-sheet/index.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | title: Cheat Sheet
4 | menuOrder: 6
5 | css1: "/c/cheatsheet.css"
6 | js1: "/j/cheatsheet.js"
7 | ---
8 |
9 |
--------------------------------------------------------------------------------
/src/documents/css-abbreviations/fuzzy-search/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 模糊查找
4 | menuOrder: 3
5 | ---
6 | If you take a look at [Cheat Sheet](/cheat-sheet/), you’ll find that there are too many CSS snippets to remember. Also, some of them might be a bit lengthy for sake of logical separation.
7 |
8 | 看一看 [速查表](/cheat-sheet/)，会发现要记的 CSS 代码片断太多了。一些也可能有点长。
9 |
10 | To make CSS writing a bit easier, Emmet implement _fuzzy search_ logic for CSS snippets: every time you enter unknown abbreviation, Emmet will try to find a closest snippet definition.
11 |
12 | 为了让书写 CSS 更容易， Emmet 实现了模糊查找。每次输入未知的缩写时，Emmet 尝试查找最相近的代码片断。
13 |
14 | For example, instead of writing `ov:h` (`overflow: hidden;`) abbreviation, you can write `ov-h`, `ovh` or even `oh`. You can play around with the fuzzy search in text editor below. Try to find as many variations as possible (use Tab key to expand abbreviations) for `bxz:cb`, `ovx:h` and `pos:a` snippets.
15 |
16 | 例如，缩写不是 `ov:h`(`overflow: hidden;`) ，而是 `ov-h`, `ovh` 甚至 `oh`。可以在下面文本框内试试。
17 |
18 |
19 |
20 | The fuzzy search is performed against _predefined snippet names_, not snippet values or CSS properties. This results in more predictable and controllable matches. Remember that you can always [create your own snippets or redefine existing ones](/customization/) to fine-tune fuzzy search experience.
21 |
22 | 模糊查找搜索代码片断名，而不是值或 CSS 属性，这样对可以控制匹配。记住可以[创建自己的或覆盖已有的代码片断](/customization/) ，以改进模糊查找的体验。
--------------------------------------------------------------------------------
/src/documents/css-abbreviations/gradients/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 渐变
4 | menuOrder: 2
5 | ---
6 | Another hard-to-write CSS3 feature is a gradient. You have to repeat long gradient definition multiple times with different vendor prefixes. Also, if you want to cover all gradient-supported browsers, you have to use three different notations: old Webkit, currently supported (`linear-gradient(top, ...)`) and W3C-proposed (`linear-gradient(to bottom, ...)`).
7 |
8 | 另一个难写的 CSS3 特性是渐变，需要重复写几遍带有不同厂商前缀的属性。而且如果想覆盖所有支持渐变的浏览器，得使用三种写法：旧版 Webkit、当前支持的 (`linear-gradient(top, ...)`) 及 W3C 标准 (`linear-gradient(to bottom, ...)`)。
9 |
10 | 译注：查看目前的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
11 |
12 | Usually, users prefere to use third-party GUIs to generate gradients definitions, but you can do the very same thing much faster right in your editor.
13 |
14 | 通常用户喜欢使用第三方 GUI 程序来生成渐变，但是在编辑器里面做得更快。
15 |
16 | Emmet has a CSS3 Gradient Generator that can do all the hard work for you:
17 |
18 | Emmet 有一个 CSS3 渐变生成器替你做这些重活：
19 |
20 |
49 |
50 | As you can see from the example above, you can type regular gradient definition as `lg(...)` (or `linear-gradient(...)`) function and expand it as an abbreviation. If you write the gradient definition as a property value, Emmet will parse it and use its name as a reference for new CSS properties.
51 |
52 | 如你所见，可以输入函数 `lg(...)` (或 `linear-gradient(...)`) 函数，并且像缩写一样展开。如果用做属性值，Emmet 将使用属性名来生成新的属性。
53 |
54 | ## Fallback value 向后兼容
55 |
56 | In preferences, you can enable `css.gradient.fallback` option to produce a fallback `background-color` CSS property whenever a gradient definition for `background-*` CSS property is expanded. This fallback property will contain a first color from gradient definition.
57 |
58 | 在配置里启用选项 `css.gradient.fallback` 后可以生成向后兼容的 `background-color`。
59 |
60 | This option is off by default because it produces a `background-color` value that almost certainly needs to be manually updated to make sure that content is readable on this background. If you don’t really care about old browsers, you can enable this option.
61 |
62 | 这个选项默认关闭，因为它生成的 `background-color` 总是需要手工更新，以确保在这个背景色上可以阅读。如果你不关心旧浏览器，可以启用这个选项。
--------------------------------------------------------------------------------
/src/documents/css-abbreviations/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: CSS 缩写
4 | menuOrder: 2
5 | ---
6 | While Emmet abbreviations are good for generating HTML, XML or any other structured markup, it may look useless for CSS. You don’t want to write CSS selectors and transform them to CSS selectors, right? The only thing Emmet can do for you is to provide shorthands for CSS properties, but editors with native snippets and autocomplete can help you way better.
7 |
8 | Emmet 能很好的用于生成HTML、XML等结构语言，而对 CSS 似乎没用。你不想书写选择器然后将它们转化为选择器，对吧？（译注：意思是指对于选择器没有意义） Emmet 能做的只是提供 CSS 属性简写，而编辑器原生代码片断与自动补全帮助更大。
9 |
10 | Actually, Emmet has something to offer.
11 |
12 | 实际上 Emmet 能做一些事。
13 |
14 | For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand `m` abbreviation to get `margin: ;` snippet. But you don’t want just `margin` property, you want to _specify a value_ for this property. So you have to manually type, let’s say, `10px`.
15 |
16 | 对于 CSS, Emmet 有大量预定义的属性代码片断。例如展开缩写 `m` 得到 `margin: ;`。但是你不只想得到 `margin`，你想给这个属性指定一个值，于是你手动输入，比如说 `10px`。
17 |
18 | Emmet can greatly optimize your workflow here: you can _inject value directly into abbreviation_. To get `margin: 10px;` you can simply expand the `m10` abbreviation. Want multiple values? Use a hypen to separate them: `m10-20` expands to `margin: 10px 20px;`. Negative values? No problem: precede the first value with hyphen and all the rest with double hyphens: `m-10--20` expands to `margin: -10px -20px;`
19 |
20 | 这里 Emmet 能大大优化你的工作流程：将值直接注入缩写。为了得到 `margin: 10px;` 只用简单的展开缩写 `m10`。想要多个值？ 使用连字符分隔值：`m10-20` 展开为 `margin: 10px 20px;`。负值？没问题，第一个值前放一个连字符，其它的值前放两个连字符：`m-10--20` 展开为 `margin: -10px -20px;`。
21 |
22 | ## How it works? 工作原理
23 |
24 | Emmet has a special CSS resolver that expands such abbreviations into a complete CSS property.
25 |
26 | Emmet 使用特别的 CSS 解析器将缩写展开为完整的 CSS 属性。
27 |
28 | Here’s what happens when you expand `m10` abbreviation.
29 |
30 | 下面是展开缩写 `m10` 的过程。
31 |
32 | First, it looks for a `m10` snippet definition in `snippets.json`. If it’s found, it simply outputs it as a regular snippet. Otherwise, it _extracts value_ from abbreviation.
33 |
34 | 首先在 `snippets.json` 里查找定义 `m10` 。如果找到了则将它作为普通的代码片断输出。否则从缩写里提取值。
35 |
36 | To provide best user experience, resolver doesn’t introduce any special value separator: it’s much faster to type `m5` rather than `m:5`. So it needs to find a value bound: *a first occurrence of digit or hyphen is treated as a value bound*. In `m10` example, `m` is _property part_ and `10` is _value part_.
37 |
38 | 为了提供最好的用户体验，解析器没有引入专门的值分隔符：输入 `m5` 比 `m:5` 快得多。这样需要查找值界定：最先出现的数字或连字符作为值界定。对于 `m10`来说， `m` 是属性，`10` 是值。
39 |
40 | When property part is found, resolver searches for the snippet definition in `snippets.json`. For an `m` part, it will find `"m": "margin:|;"` definition (`|` character is used as a caret position reference when the snippet is expanded).
41 |
42 | 当找到属性部分后，解析器在 `snippets.json` 里查找代码片断定义。对于 `m` , 找到定义 `"m": "margin:|;"` （`|` 是缩写展开后的插入符位置）。
43 |
44 | The snippet definition looks like a CSS property (this is very important!) so Emmet is able to split it to a CSS property and value and place transformed value part at caret position (the `|` character).
45 |
46 | 代码片断定义看着像 CSS 属性（这很重要！），这样 Emmet 能够将缩写分成属性与值两部分，并将转换后的值放到插入符的位置（由 `|` 指定）
47 |
48 | ## Supplying values with units 添加单位
49 |
50 | By default, when you expand an abbreviation with integer value, Emmet outputs it with a `px` unit: `m10` → `margin: 10px;`. If you’re expanding an abbreviation with a float value, it is outputted with an `em` unit: `m1.5` → `margin: 1.5em;`. But you can explicitly provide the unit name, just by putting any alpha characters right after value: `m1.5ex` → `margin: 1.5ex;`, `m10foo` → `margin: 10foo;`.
51 |
52 | 当展开整数值时，Emmet 默认添加单位 `px`，例如 `m10` → `margin: 10px;`。如果是展开浮点数值，添加单位 `em`，例如 `m1.5` → `margin: 1.5em;`。不过可以显式地在值后面指定单位：`m1.5ex` → `margin: 1.5ex;`, `m10foo` → `margin: 10foo;`。
53 |
54 | If you’re explicitly defining units, you don’t need to use hyphens to separate values anymore: `m10ex20em` → `margin: 10ex 20em;`, `m10ex-5` → `margin: 10ex -5px;`.
55 |
56 | 如果显式地指定单位，不再需要用连字号分隔值：`m10ex20em` → `margin: 10ex 20em;`, `m10ex-5` → `margin: 10ex -5px;`。
57 |
58 | ## Value aliases 单位别名
59 |
60 | Emmet has a few aliases for commonly used values:
61 |
62 | 常用单位别名：
63 |
64 | * `p` → `%`
65 | * `e` → `em`
66 | * `x` → `ex`
67 |
68 | You can use aliases instead of full units:
69 |
70 | 示例：
71 |
72 | * `w100p` → `width: 100%`
73 | * `m10p30e5x` → `margin: 10% 30em 5ex`
74 |
75 | ## Color values 颜色值
76 |
77 | Emmet supports hex color values, like this: `c#3` → `color: #333;`. The `#` sign is a _value separator_ so you don’t need to use hyphen to separate it. For example, `bd5#0s` expands to `border: 5px #000 solid`: the `#` sign separates color from `5` and since `s` (alias to `solid`) is not a hexadecimal character, it can be used without `-` value separator.
78 |
79 | Emmet 支持 16 进制颜色值，例如：`c#3` → `color: #333;`。`#` 是值分隔符，所以不需要连字符。例如 `bd5#0s` 展开为 `border: 5px #000 solid`，`#` 将颜色值与 `5` 隔开，既然 `s` ( `solid` 的别名) 不是 16 进制字符，就不需要用连字符。
80 |
81 | You can write one, two, three or six characters as color value:
82 |
83 | 可以写 1 个， 2 个，3 个或 6 个字符作为颜色值:
84 |
85 | * `#1` → `#111111`
86 | * `#e0` → `#e0e0e0`
87 | * `#fc0` → `#ffcc00`
88 |
89 | When `css.color.short` [preference](/customization/preferences/) is enabled (by default), color values like `#ffcc00` are automatically shortened to `#fc0`. You can also automatically change character case with `css.color.case` preference.
90 |
91 | 当在[配置](/customization/preferences/)中启用选项 `css.color.short` 后（默认启用），颜色值如 `#ffcc00` 自动简化为 `#fc0`。也可以用选项 `css.color.case` 自动改变颜色值字符的大小写。
92 |
93 | ## Unit-less properties 无单位属性
94 |
95 | Some CSS properties are defined as _unit-less_, e.g. no unit suffix will be outputted: `lh2` → `line-height: 2;`, `fw400` → `font-weight: 400;`.
96 |
97 | 有些 CSS 属性无单位。例如： `lh2` → `line-height: 2;`, `fw400` → `font-weight: 400;`
98 |
99 | These values are: `'z-index`, `line-height`, `opacity` and `font-weight` but you can override them with `css.unitlessProperties` preferences.
100 |
101 | 这些属性是：`'z-index`, `line-height`, `opacity` 和 `font-weight`。可以用选项 `css.unitlessProperties` 配置。
102 |
103 | ## !important modifier
104 |
105 | You can add `!` suffix at the end of any CSS abbreviation to get `!important` value:
106 |
107 | 在任意 CSS 缩写后面添加 `!`，将得到 `!important` 值：
108 |
109 | p!+m10e!
110 |
111 | ...will produce
112 |
113 | ```css
114 | padding: !important;
115 | margin: 10em !important;
116 | ```
117 |
--------------------------------------------------------------------------------
/src/documents/css-abbreviations/vendor-prefixes/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 厂商前缀
4 | menuOrder: 1
5 | ---
6 | New CSS3 features are a blessing for web-developers: with a few lines of code we can do things that were nearly impossible a few years ago. But these features are also a real pain for us: we have to write the same property many times for different browsers.
7 |
8 | 新的 CSS3 特性是开发者的福音：几行代码可以做到几年前几乎做不到的事。但是同时也给我们带来一个痛苦：一个属性需要为不同的浏览器重复写几遍。
9 |
10 | Emmet’s CSS resolver has a nice feature that can greatly improve your CSS3 experience. Every time you precede CSS property or its abbreviation with a hyphen, Emmet automatically creates vendor-prefixed copies of this property. For example, `-bdrs` abbreviation will be expanded into
11 |
12 | Emmet 的 CSS 解析器提供一个不错的功能，可以大大提高你的 CSS3 开发体验。在属性前或缩写前放一个连字符，Emmet 会自动给这个属性添加厂商前缀。例如缩写 `-bdrs` 将展开为：
13 |
14 | ```css
15 | -webkit-border-radius: ;
16 | -moz-border-radius: ;
17 | border-radius: ;
18 | ```
19 |
20 | Moreover, in editors with tabstops support (such as Eclipse, Sublime Text 2, Espresso etc.) Emmet will create a linked value placeholder so you can type a property value and it will be automatically placed in all generated properties.
21 |
22 | 而且对于支持插入占位的编辑器（Eclipse, Sublime Text 2, Espresso 等），Emmet 将创建关联的属性值占位，输入一次将自动插入到所有生成的属性中。
23 |
24 | ## How it works? 工作原理
25 |
26 | Whenever you expand abbreviation with a hyphen in front of it, Emmet removes the hyphen and looks for a snippet definition in `snippets.json` for the rest of the abbreviation. For example, for `-bdrs` abbreviation it will look for a `bdrs` definition. `snippet.json` has the following definition:
27 |
28 | 缩写前放一个连字符，展开时，Emmet 移除连字符，然后在 `snippets.json` 里查找缩写的定义。例如 `-bdrs` 将查找 `bdrs`：
29 |
30 | "bdrs": "border-radius:|;"
31 |
32 | ...which means that `bdrs` will be expanded into `border-radius` property. If no definition found, the abbreviation itself will be used as a CSS property name.
33 |
34 | `bdrs` 将展开为 `border-radius` 属性。如果没有找到定义，缩写将用作一个属性名。
35 |
36 | After the CSS resolver figures out a property name that should be outputted, it will look for its occurrence in special _vendor catalogs_. These catalogs are defined as `css.{vendor}Properties` entries in preferences and can be overridden by user. `{vendor}` is a browser’s vendor prefix, for example, `webkit`, `moz` etc.
37 |
38 | 当 CSS 解析器知道要输出属性名后，便在“厂商分类”中查找此属性名。这些分类在配置里由 `css.{vendor}Properties` 定义。`{vendor}` 是浏览器厂商前缀，比如 `webkit`, `moz` 等。
39 |
40 | If the expanded property was found in any of these catalogs, their vendor prefixes will be used to produce prefixed properties. Otherwise, _all prefixes_ will be used.
41 |
42 | 如果在厂商分类中找到了，这些厂商前缀将用于生成带前缀的属性。如果没找到则使用所有的前缀。
43 |
44 | For example, the `border-radius` property is defined in `css.webkitProperties` and `css.mozProperties` so this property will be outputted with `webkit` and `moz` prefixes. On the other hand, a `foo` property isn’t defined anywhere so it will be outputted with all available prefixes when you expand `-foo` abbreviation: `webkit`, `moz`, `ms` and `o`. It is especially helpful for using cutting-edge CSS properties that were recently implemented.
45 |
46 | 例如属性`border-radius` 在 `css.webkitProperties` 和 `css.mozProperties` 中有定义，这个属性输出时将带上前缀 `webkit` 和 `moz`。属性 `foo` 在所有分类中均没有定义，则展开缩写 `-foo` 时将带上所有前缀: `webkit`, `moz`, `ms` and `o`。这个功能在使用刚实现的 CSS 属性时特别有用。
47 |
48 | Imagine that Google Chrome implemented `super-foo` property yesterday and you want to use it in your project. You can expand `-super-foo` abbreviation which results in the following snippet:
49 |
50 | 假定昨天 Google Chrome 实现了属性 `super-foo`，你打算用在项目中，展开 `-super-foo` 得到：
51 |
52 | ```css
53 | -webkit-super-foo: ;
54 | -moz-super-foo: ;
55 | -ms-super-foo: ;
56 | -o-super-foo: ;
57 | super-foo: ;
58 | ```
59 |
60 | ## Add prefixed properties by default 默认添加厂商前缀
61 |
62 | While writing CSS files, you may find that a “clear” CSS3 property is useless without its vendor-prefixed variants. It makes writing hyphenated abbreviations like `-trf` (`trf` is an alias to `transform` property) a bit awkward.
63 |
64 | 一个 CSS3 属性如果没有厂商前缀可能就没用，这样书写带连字符的缩写不方便。
65 |
66 | This is why Emmet has `css.autoInsertVendorPrefixes` preference enabled by default. With this preference enabled, all CSS properties defined in vendor catalogs will be automatically supplied with matched vendor-prefixed variants.
67 |
68 | 这便是 Emmet 为什么默认启用选项 `css.autoInsertVendorPrefixes`。当启用这个选项后，所有在厂商分类里定义的 CSS 属性将自动添加相应的厂商前缀。
69 |
70 | It means that you don’t need to use a hyphen to get valid prefixed variants for known CSS properties, simply expand abbreviations like `bdrs` or `trf` to get a valid list of vendor-prefixed properties.
71 |
72 | 这意味着不需要对已定义的 CSS 属性使用连字符去添加厂商前缀。例如展开 `bdrs` 或 `trf`，将得到一列带有厂商前缀的属性。
73 |
74 | ## Explicit vendor prefixed 显式添加厂商前缀
75 |
76 | Sometimes you may want to output CSS properties with specified vendor prefixed properties only.
77 |
78 | 有时你只想输出指定厂商前缀的 CSS 属性。
79 |
80 | Let’s say you want to output `transform` property with `webkit` and `moz` prefixes only. In this case you can expand the following abbreviation:
81 |
82 | 比如说输出属性 `transform`，只带有前缀 `webkit` 与 `moz`。在这种情况下展开下面缩写：
83 |
84 | -wm-trf
85 |
86 | As you can see, we slightly modified the abbreviation by adding a list of one-letter prefixes. In this case, these are `w` (`webkit`) and `m` (`moz`) prefixes. Emmet has the following one-letter prefixes:
87 |
88 | 如你所见，添加单字符的前缀列表可以修改缩写。这个例子中是 `w` (`webkit`) 和 `m` (`moz`)。Emmet 支持下面单字符前缀：
89 |
90 | * `w`: `webkit`
91 | * `m`: `moz`
92 | * `s`: `ms`
93 | * `o`: `o`
94 |
95 | 译注：目前的趋势是浏览器在实现新属性时不再使用厂商前缀，而是通过特性开关来启用。这样可以避免厂商前缀带来混乱。
--------------------------------------------------------------------------------
/src/documents/customization/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: 配置
4 | menuOrder: 5
5 | ---
6 | Emmet offers wide range of tweaks you can use to fine-tune your plugin experience. Almost all officially developed editor plugins (except PSPad and browser-based) has **extensions support**: a special folder where you can put `json` and `js` files to extend Emmet. Please refer to README file bundled with your editor’s plugin to find out where Emmet looks for extensions.
7 |
8 | 几乎所有的官方开发的插件（除了 PSPad 与 网页编辑器的插件外）均支持扩展： 将 `json` 与 `js` 文件放到特定目录下。请查看你的编辑器插件说明，找到这个目录。
9 |
10 | 译注：这里所说的插件即 Emmet。
11 |
12 | Each `.js` file located in extensions folder will be loaded and executed on plugin start-up. Use `js` files to create your own [filters](/filters/) or [actions](/actions/): you can use Emmet modules and bindings to script your editor with JavaScript.
13 |
14 | 扩展目录下所有的 `.js` 文件在插件启动时加载并执行。使用 `.js` 文件创建你自己的 [过滤器](/filters/) 或 [功能](/actions/)：你可以利用 Emmet 的模块与绑定，以 JavaScript 来编写你的编辑器插件。
15 |
16 | With `.json` files you can fine-tune different parts of Emmet toolkit:
17 |
18 | 使用 `.json` 文件配置 Emmet：
19 |
20 |
21 |
[snippets.json](./snippets/)
22 |
Add your own or update existing snippets.
23 |
添加或更新已有的代码片断。
24 |
[preferences.json](./preferences/)
25 |
Change behavior of some Emmet filters and actions.
26 |
配置过滤器与功能。
27 |
[syntaxProfiles.json](./syntax-profiles/)
28 |
Define how generated HTML/XML should look.
29 |
定义怎样输出 HTML/XML。
30 |
31 |
32 | ## 译注
33 |
34 | 在Sublime Text 下 Emmet 可以用选项 `extensions_path` 配置扩展目录，默认为 `~/emmet`。也可以用相对路径，对于便携版，是相对于 `sublime_text.exe` 的路径。
--------------------------------------------------------------------------------
/src/documents/customization/preferences/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "preferences.json"
4 | menuOrder: 2
5 | ---
6 | The `preferences.json` file is used to modify behavior of some actions and resolvers of Emmet. This file contains a simple dictionary of key–value pairs.
7 |
8 | `preferences.json` 文件用于配置 Emmet 的功能与解析器。
9 |
10 | For example, on “[CSS Gradients](/css-abbreviations/gradients/)” there’s description of `css.gradient.fallback` option which enables fallback `background-color` value when definition is expanded. To enable it, simply add this key to `preferences.json` file:
11 |
12 | 例如 “[CSS Gradients](/css-abbreviations/gradients/)” 有一选项 `css.gradient.fallback`，用于启用兼容的 `background-color`：
13 |
14 | {
15 | "css.gradient.fallback": true
16 | }
17 |
18 | Here’s a list of currently available options:
19 |
20 | 可用选项：
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/documents/customization/snippets/index.html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: page
3 | title: "snippets.json"
4 | menuOrder: 1
5 | ---
6 | Create `snippets.json` file in extensions folder to add or override snippets. The structure of this file is the same as the [original one](https://github.com/emmetio/emmet/blob/master/snippets.json): on the top level you define _syntax name_ your snippets belong to, and the second level has the following section:
7 |
8 | 在扩展目录创建 `snippets.json` 文件，添加或覆盖代码片断。文件结构同[默认文件](https://github.com/emmetio/emmet/blob/master/snippets.json)，在顶层定义代码片断所属的语法名，次级的结构：
9 |
10 | * `abbreviations` or `snippets` contains snippets definitions of [different types](/abbreviations/types/).
11 | * `abbreviations` 与 `snippets` 包含[不同类型](/abbreviations/types/)的代码片断定义。
12 | * `filters` contains a comma-separated list of [filters](/filters/) applied by default for current syntax. If this property is not defined, `html` filter is used.
13 | * `filters` 包含一个逗号分割列表，用于指定应用于当前语法的[过滤器](/filters/)。如果没有指定，则使用 `html` 过滤器。
14 | * `extends`: syntax name from which current syntax should inherit snippets definitions. For example, `sass` syntax is inherited from `css` one, but you can create your own or override some SASS-specific snippets for this syntax definition.
15 | * `extends`: 指定当前语法继承哪个语法的代码片断。例如 `sass` 语法继承自 `css`，不过可以创建自己的或覆盖一些 SASS 专有的代码片断。
16 |
17 | When loaded, users’ `snippets.json` in _recursively merged_ with the original one, adding or updating abbreviations and snippets.
18 |
19 | 当 Emmet 加载时，用户的 `snippets.json` 与默认文件合并，以添加或更新缩写与代码片断。
20 |
21 | ### Text snippets 文本代码片断
22 |
23 | In `snippets` section of syntax definition, you create plain text snippets, pretty like the same as your editor ones. You can also use _tabstops_ inside snippets to traverse between them with Tab key when abbreviation is expanded (if your editor supports them). Emmet borrows tabstop format from [TextMate](http://macromates.com) editor:
24 |
25 | 在 `snippets` 部分创建文本代码片断。可以在代码片断名为使用插入占位，当缩写展开后可以用 Tab 键在这些插入占位之间移动（需要编辑器支持）。Emmet 借用了 [TextMate](http://macromates.com) 的格式：
26 |
27 | * `$1` or `${1}`
28 | * `${1:hello world}` — 有占位文本的插入占位
29 |
30 | Note that `${0}` or `$0` tabstop has a special meaning in some editors like TextMate or Eclipse and is used as a final caret position after leaving “tabstops mode” so you’d better use tabstops staring from 1.
31 |
32 | 注意在一些编辑器如TextMate 或 Eclipse 下，`${0}` 与 `$0` 有特殊意义，用于指示离开插入占位模式后插入符最终位置，所以插入占位最好从 1 开始。
33 |
34 | ### Variables 变量
35 |
36 | You can use _variables_ in snippets to output predefined data. For example, the `html:5` snippet of HTML syntax has the following definition:
37 |
38 | 可以在代码片断中使用变量，以输出预先定义的数据。例如 `html:5` 定义如下：
39 |
40 | \n...\n