Skip to content

Commit 5bdb126

Browse files
devvaannshdevvaannsh
committed
feat: emmet feature docs
1 parent 092cc1f commit 5bdb126

File tree

4 files changed

+90
-19
lines changed

4 files changed

+90
-19
lines changed

‎docs/03-editing-text.md‎

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -87,26 +87,9 @@ Move your cursor out of the tag and then back into the tag.
8787
---
8888

8989
## Emmet
90-
**Coming Soon...**
90+
With **Emmet**, you can write HTML and CSS faster using shorthand abbreviations. If an abbreviation is Emmet-compatible, Phoenix Code Editor shows code hints and expands it into complete code structures when selected.
9191

92-
### Emmet in Markup Languages
93-
In **HTML**, **PHP** or HTML-like files such as **JSP**, when you type a valid Emmet abbreviation (for example: `ul>li`, `p`, or `!`), **Phoenix Code** displays a code hint with the abbreviation text and an Emmet icon. This icon indicates that the suggestion comes from Emmet. When you select the Emmet hint, the abbreviation is expanded into its full code snippet.
94-
<VideoPlayer
95-
src="https://docs-images.phcode.dev/videos/editing-text/emmet-html.mp4"
96-
/>
97-
98-
### Emmet in Stylesheet Languages
99-
Emmet also works in stylesheets (CSS, SCSS, Less). When you type an Emmet-expandable property, a list of default code hints appears with the Emmet suggestion at the top.
100-
<VideoPlayer
101-
src="https://docs-images.phcode.dev/videos/editing-text/emmet-css.mp4"
102-
/>
103-
104-
### Enabling/Disabling Emmet
105-
To enable or disable the **Emmet** feature, go to `Edit` > `Emmet`.
106-
107-
![Toggle Emmet feature](./images/editingText/toggle-emmet.png "Toggle Emmet")
108-
109-
Alternatively, you can also toggle the **Emmet** feature by updating the `emmet` property in the preferences file. [Click Here](#editing-preferences) to read on how to edit the preferences.
92+
[Read More](./Features/emmet)
11093

11194
---
11295

‎docs/07-Features/03-emmet.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Emmet
3+
---
4+
5+
import React from 'react';
6+
import VideoPlayer from '@site/src/components/Video/player';
7+
8+
**Emmet** helps you quickly expand shorthand abbreviations into full code blocks. When you type an Emmet-compatible abbreviation, **Phoenix Code Editor** displays a code hint with the abbreviation text and a small `Emmet` icon on the right, indicating that the hint comes from Emmet. Selecting the hint expands it into a complete code snippet.
9+
10+
**Phoenix Code Editor** includes smart cursor positioning. After expanding an Emmet abbreviation, it automatically places the cursor at the most relevant position so you can start typing immediately. It also adjusts the indentation of the expanded code automatically.
11+
> See the [complete Emmet abbreviations cheat sheet](https://docs.emmet.io/cheat-sheet/).
12+
13+
### Emmet in Markup Languages
14+
**Emmet** works in **HTML**, **PHP** or HTML-like files such as **JSP**.
15+
**Examples:**
16+
* `ul>li*2` expands to:
17+
```html
18+
<ul>
19+
<li></li>
20+
<li></li>
21+
</ul>
22+
```
23+
24+
* `!` expands to:
25+
```html
26+
<!DOCTYPE html>
27+
<html lang="en">
28+
<head>
29+
<meta charset="UTF-8">
30+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
31+
<title>Document</title>
32+
</head>
33+
<body>
34+
35+
</body>
36+
</html>
37+
```
38+
39+
40+
> Refer to [this link](https://docs.emmet.io/abbreviations/) to read more about Emmet abbreviations for markup languages.
41+
42+
**Visual Reference**
43+
<VideoPlayer
44+
src="https://docs-images.phcode.dev/videos/editing-text/emmet-html.mp4"
45+
/>
46+
47+
### Emmet in Stylesheet Languages
48+
**Emmet** also works in stylesheets (**CSS**, **SCSS**, **Less**). In stylesheets, the Emmet icon acts as a clickable link that opens the corresponding MDN documentation for that property (if available).
49+
![Emmet MDN link](./images/Emmet/emmet-link-mdn.png "Emmet MDN link")
50+
51+
**Examples:**
52+
* `bgc` expands to:
53+
```css
54+
background-color:
55+
```
56+
57+
* `mt10` expands to:
58+
```css
59+
margin-top: 10px;
60+
```
61+
62+
63+
> Refer to [this link](https://docs.emmet.io/css-abbreviations/) to read more about Emmet abbreviations for stylesheets.
64+
65+
**Visual Reference**
66+
<VideoPlayer
67+
src="https://docs-images.phcode.dev/videos/editing-text/emmet-css.mp4"
68+
/>
69+
70+
### Enabling/Disabling Emmet
71+
To enable or disable the **Emmet** feature, go to `Edit` > `Emmet`.
72+
73+
![Toggle Emmet feature](./images/Emmet/toggle-emmet.png "Toggle Emmet")
74+
75+
You can also toggle Emmet by updating the `emmet` property in the preferences file.
76+
See [Editing Preferences](../03-editing-text.md#editing-preferences) for more details.
77+
78+
## FAQ
79+
80+
#### Q. What happens if I try to expand a very large abbreviation?
81+
82+
**Phoenix Code Editor** supports large Emmet expansions but applies limits to keep the app stable.
83+
84+
- **Maximum word expansion:** 100,000 words
85+
Example: `lorem*100000000` expands only to **100,000** words.
86+
87+
- **Maximum repeat count:** 400
88+
Example: `ul>li*10000` creates **400** list items at most.

‎docs/07-Features/images/Emmet/emmet-link-mdn.png‎

237 KB
Loading

‎docs/images/editingText/toggle-emmet.png‎ renamed to ‎docs/07-Features/images/Emmet/toggle-emmet.png‎

File renamed without changes.

0 commit comments

Comments
 (0)