Emmet (software)

Last updated
Emmet
Developer(s) emmetio
Repository
Written inTypeScript, JavaScript
License MIT Licence
Website emmet.io OOjs UI icon edit-ltr-progressive.svg

Emmet (formerly Zen Coding [1] ) is a set of plug-ins for text editors that allows for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. The project was started by Vadim Makeev in 2008 [2] and continues to be actively developed by Sergey Chikuyonok and Emmet users. Since 2015, Mikael Geletsyan [3] is responsible for UX at Emmet. The tools have been incorporated into several popular text editors, as well as some plug-ins developed by the Emmet team and others implemented independently. However, Emmet is primarily independent from any text editor, as the engine works directly with text rather than with any particular software. [4]

Contents

Emmet is open sourced under the MIT License.

Functions

Expand abbreviations

Emmet uses a specific syntax in order to expand small snippets of code, similar to CSS selectors, into full-fledged HTML code. [5] For example, the sequence

div#page>div.logo+ul#navigation>li*5>a

or

#page>.logo+ul#navigation>li*5>a

expands into

<divid="page"><divclass="logo"></div><ulid="navigation"><li><ahref=""></a></li><li><ahref=""></a></li><li><ahref=""></a></li><li><ahref=""></a></li><li><ahref=""></a></li></ul></div>

The expand abbreviations function includes several other complex functions, such as wrapping a section of code with expanded code. [6]

Tag balancing

The HTML Pair Matcher allows users to locate the matching open/close tag for the tag at the current cursor position. Unlike other HTML pair matchers, Emmet searches from the cursor's current position rather than scanning the document from the beginning. [7]

Text editors

The plug-ins for following text editors were developed by the Emmet team

The following text-editor plug-ins were developed by third-party groups with the official Emmet engine

The following text editor plug-ins were developed independently and with a different Emmet engine

Related Research Articles

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

HyperText Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

jEdit Cross platform text editor

jEdit is a free software text editor available under GPL-2.0-or-later. It is written in Java and runs on any operating system with Java support, including BSD, Linux, macOS and Windows.

<span class="mw-page-title-main">BBEdit</span> Third-party text editor for Apple Macintosh computers

BBEdit is a proprietary text editor made by Bare Bones Software, originally developed for Macintosh System Software 6, and currently supporting macOS.

Microformats (μF) are a set of defined HTML classes created to serve as consistent and descriptive metadata about an element, designating it as representing a certain type of data. They allow software to process the information reliably by having set classes refer to a specific type of data rather than being arbitrary.

hCard is a microformat for publishing the contact details of people, companies, organizations, and places, in HTML, Atom, RSS, or arbitrary XML. The hCard microformat does this using a 1:1 representation of vCard properties and values, identified using HTML classes and rel attributes.

In HTML, the standard markup language for documents designed to be displayed in a web browser, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

Haml is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner. Haml gives you the flexibility to have some dynamic content in HTML. Similar to other template systems like eRuby, Haml also embeds some code that gets executed during runtime and generates HTML code in order to provide some dynamic content. In order to run Haml code, files need to have a .haml extension. These files are similar to .erb or .eRuby files, which also help embed Ruby code while developing a web application.

<span class="mw-page-title-main">Padre (software)</span> Perl software development platform

Padre is a multi-language software development platform comprising an IDE and a plug-in system to extend it. It is written primarily in Perl and is used to develop applications in this language.

XHTML+RDFa is an extended version of the XHTML markup language for supporting RDF through a collection of attributes and processing rules in the form of well-formed XML documents. XHTML+RDFa is one of the techniques used to develop Semantic Web content by embedding rich semantic markup. Version 1.1 of the language is a superset of XHTML 1.1, integrating the attributes according to RDFa Core 1.1. In other words, it is an RDFa support through XHTML Modularization.

Twig is a template engine for the PHP programming language. Its syntax originates from Jinja and Django templates. It's an open source product licensed under a BSD License and maintained by Fabien Potencier. The initial version was created by Armin Ronacher. Symfony PHP framework comes with a bundled support for Twig as its default template engine since version 2.

jQuery Mobile is a touch-optimized web framework, specifically a JavaScript library, developed by the jQuery project team. The development focuses on creating a framework compatible with many smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is consistent with other mobile app frameworks and platforms such as PhoneGap, Worklight, etc.

<span class="mw-page-title-main">Brackets (text editor)</span> Editor for web development

Brackets is a source code editor with a primary focus on web development. Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality.

Leaflet is a JavaScript library used to build web mapping applications. It allows developers without a GIS background to display tiled web maps hosted on a public server, with optional tiled overlays. It can load feature data from GeoJSON files, style it and create interactive layers, such as markers with popups when clicked.

Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website.

Framework7 is an open source and free framework to develop mobile, desktop or web apps; Framework7 can also be used as a prototyping tool.

References

  1. Rocha, Zeno (March 26, 2013). "Goodbye, Zen Coding. Hello, Emmet!". Smashing Magazine . Smashing Magazine GmbH. Retrieved March 15, 2015.
  2. "Zen HTML — Пепелсбей.net". pepelsbey.net.
  3. "Credits". emmet.io. Retrieved 2018-11-27.
  4. "Zen Coding: A Speedy Way To Write HTML/CSS Code". 21 November 2009.
  5. "The Art of zen-coding: Bringing Snippets to a New Level". mondaybynoon.com.
  6. "If you code HTML, Zen Coding will change your life". 22 January 2013. Archived from the original on 22 January 2013.
  7. "Zen Coding: A Speedy Way To Write HTML/CSS Code". 21 November 2009.