Edit online

An Oxygen Emmet Plugin is available as an add-on and it provides the means for high-speed coding and editing in Text mode or Author mode via a content assistance mechanism. It can be used for HTML, XSL, and other XML 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 OS X) or Alt + Shift + W (Ctrl + Shift + W on OS X) keyboard shortcuts.

To install this add-on, follow this procedure:
  1. Go to Help > Install new add-ons to open an add-on selection dialog box.
  2. 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.
  3. Select Oxygen Emmet Plugin add-on and click Next.
  4. Select the I accept all terms of the end user license agreement option and click Finish.
  5. 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 or Author mode.

Emmet Actions

The two contributed actions are:

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

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.

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

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 $}

    is expanded 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[alt=$#]
    is expanded into:
    <ul>
      <li title="About">About<img src="" alt="About" class=""></li>
      <li title="News">News<img src="" alt="News" class=""></li>
      <li title="Products">Products<img src="" alt="Products" class=""></li>
      <li title="Contacts">Contacts<img src="" alt="Contacts" class=""></li>
    </ul>
You can also use Emmet abbreviations for other XML documents. Here are some examples of expanded abbreviations for DITA:
  • prolog>author {AuthorName}

    is expanded into:

    <prolog>
      <author>AuthorName</author>
    </prolog>
  • simpletable>(strow>stentry*4)*4

    is expanded into a 4x4 simple table.

  • ul>li*3

    is expanded into an unordered list with 3 list items.

  • ol>li[id="item$"]*3
    is expanded into:
    <ol id="ol_gff_bjd_mkb">
      <li id="item1"/>
      <li id="item2"/>
      <li id="item3"/>
    </ol>
Tip: To see more examples of Emmet syntax, go to https://docs.emmet.io/cheat-sheet/.