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.

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.

<span class="mw-page-title-main">Bluefish (software)</span> Free software text editor

Bluefish is a free and open-source software advanced source code editor with a variety of tools for programming and website development. It supports editing source code such as C, JavaScript, Java, PHP, Python, as well as markup languages such as HTML, YAML and XML. It is available for many platforms, including Linux, macOS, and Windows, and can be used via integration with GNOME or run as a stand-alone application. Designed as a compromise between plain text editors and full programming IDEs, Bluefish is lightweight, fast and easy to learn, while providing many IDE features. Bluefish was one of the first source code editors on the Linux desktop. It has been translated into 17 languages. The source code is available under the GNU General Public License.

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.

This is a comparison of both historical and current web browsers based on developer, engine, platform(s), releases, license, and cost.

<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.

<span class="mw-page-title-main">Mouseover</span> User interface element

In the field of computing and web design, a mouseover, is an event occurring when the user moves the cursor over a specified point on a computer monitor using a computer mouse. Also called a hover effect, mouseovers are graphical controls that respond when a user moves their mouse pointer over a designated area. This area can be a button, image, or hyperlink. This simple action can trigger different responses. The element's color or appearance can change. Additional information or interactive content can be displayed. The mouseover effect is an essential part of user interaction. It adds layers of interactivity and responsiveness to websites and applications.

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. 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.

Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to Microdata because it allows them to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and microformats.

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.

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. 17 August 2009.
  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.