Edit online

Oxygen Emmet Plugin

An Oxygen Emmet Plugin is available as an add-on and it provides the means for high-speed coding and editing in Text mode via a content assistance mechanism. It can be used for HTML, XSL, CSS, LESS, and other formats. For example, with the Emmet add-on installed, you can type abbreviations (similar to CSS selectors) and expand them into full-fledged HTML code. The add-on contributes a submenu named Emmet in the contextual menu and it contains actions for expanding abbreviations or wrapping content with an expanded abbreviation. The two actions can also be invoked using the Alt + Shift + E (Ctrl + Shift + E on macOS) or Alt + Shift + W (Ctrl + Shift + W on macOS) keyboard shortcuts.

Quick Installation

You can drag the following Install button and drop it into the main editor in Oxygen to quickly initiate the installation process:

Install

Manual Installation

To manually install this add-on, follow this procedure:

Go to Help > Install new add-ons to open an add-on selection dialog box. Enter or paste https://www.oxygenxml.com/InstData/Addons/default/updateSite.xml in the Show add-ons from field or select it from the drop-down menu.
Note: If you have issues connecting to the default update site, you can download the add-on package, unzip it, then use the Browse for local files action in the Install new add-ons dialog box to locate the downloaded addon.xml file.
Tip: For HTML, CSS, LESS, or XSL files, you can simply right-click anywhere in the editor pane and select Emmet from the pop-up menu.
Select the Oxygen Emmet Plugin add-on and click Next.
Read the end-user license agreement. Then select the I accept all terms of the end-user license agreement option and click Finish.
Restart the application.

Result: The Emmet actions will now be available using the keyboard shortcuts or in the Emmet submenu (located in the contextual menu of Text mode.

Emmet Actions

The two contributed actions are:

Expand abbreviation [Alt + Shift + E (Ctrl + Shift + E on macOS)]

In Text mode, after entering an abbreviation, invoking this action will expand a valid abbreviation into a code snippet, depending on the document type.

In Author mode, invoking the action opens a dialog box where you can enter an abbreviation. After you click OK, a valid abbreviation is expanded into a code snippet, depending on the document type.

Tip: For HTML, CSS, LESS, or XML-based document types, you can also use Ctrl + Space to expand Emmet abbreviations.

Wrap with abbreviation [Alt + Shift + W (Ctrl + Shift + W on macOS)]

It opens a dialog box where you can enter an abbreviation and after clicking OK, the abbreviation is expanded with the selected content added in the last element of the generated snippet.

Abbreviation Expansion Examples

Here are some examples for HTML:

Expand abbreviation example:

#page>div.logo+ul#navigation>li*5>a{Item $}

expands into:

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

Wrap with abbreviation example:

If the following content is selected to be wrapped:

 About
 News
 Products
 Contacts

then

ul>li[title=$#]*>{$#}+img[src=https://www.ex1.com/$#][alt=item$]

expands into:

<ul>
    <li title="About">About<img src="https://www.ex1.com/About" alt="item1"></li>
    <li title="News">News<img src="https://www.ex1.com/News" alt="item2"></li>
    <li title="Products">Products<img src="https://www.ex1.com/Products" alt="item3"></li>
    <li title="Contacts">Contacts<img src="https://www.ex1.com/Contacts" alt="item4"></li>
</ul>

You can also use Emmet abbreviations for other XML documents. Here are some examples of expanded abbreviations for DITA:

prolog>author {AuthorName}

expands into:

<prolog>
  <author>AuthorName</author>
</prolog>

```
simpletable>(strow>stentry*4)*4
```
expands into a 4x4 simple table.
```
ul>li*3
```
expands into an unordered list with 3 list items.

ol>li[id="item$"]*3

expands into:

<ol id="ol_gff_bjd_mkb">
  <li id="item1"/>
  <li id="item2"/>
  <li id="item3"/>
</ol>

Here are a few CSS examples:

@f+

expands into:

@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
       url('FileName.woff') format('woff'),
       url('FileName.ttf') format('truetype'),
       url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}

-br

expands into:

  -webkit-border-right: ;
  -moz-border-right: ;
  -ms-border-right: ;
  -o-border-right: ;
  border-right: ;

Tip: To see more examples of Emmet syntax, go to https://docs.emmet.io/cheat-sheet/.