How to use emmet - 10 common examples

To help you get started, we’ve selected a few emmet examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github emmetio / brackets-emmet / main.js View on Github external
function init() {
		try {
			if (typeof keymap == 'string') {
				keymap = JSON.parse(keymap);
			}
		} catch(e) {
			console.error(e);
		}

		emmet.loadSystemSnippets(snippets);
		emmet.loadCIU(ciu);

		var menu = Menus.addMenu('Emmet', 'io.emmet.EmmetMainMenu');
		registerInteractiveCommands(menu);

		// register all commands
		actions.getList().forEach(function(action) {
			if (~skippedActions.indexOf(action.name)) {
				return;
			}

			var id = 'io.emmet.' + action.name;
			
			if (!CommandManager.get(id)) {
				// regiester new command only if wasn’t defined previously
				var cmd = ~singleSelectionActions.indexOf(action.name) 
					? actionDecorator(action.name)
github emmetio / brackets-emmet / main.js View on Github external
function init() {
		try {
			if (typeof keymap == 'string') {
				keymap = JSON.parse(keymap);
			}
		} catch(e) {
			console.error(e);
		}

		emmet.loadSystemSnippets(snippets);
		emmet.loadCIU(ciu);

		var menu = Menus.addMenu('Emmet', 'io.emmet.EmmetMainMenu');
		registerInteractiveCommands(menu);

		// register all commands
		actions.getList().forEach(function(action) {
			if (~skippedActions.indexOf(action.name)) {
				return;
			}

			var id = 'io.emmet.' + action.name;
			
			if (!CommandManager.get(id)) {
				// regiester new command only if wasn’t defined previously
				var cmd = ~singleSelectionActions.indexOf(action.name)
github emmetio / brackets-emmet / main.js View on Github external
try {
			if (typeof keymap == 'string') {
				keymap = JSON.parse(keymap);
			}
		} catch(e) {
			console.error(e);
		}

		emmet.loadSystemSnippets(snippets);
		emmet.loadCIU(ciu);

		var menu = Menus.addMenu('Emmet', 'io.emmet.EmmetMainMenu');
		registerInteractiveCommands(menu);

		// register all commands
		actions.getList().forEach(function(action) {
			if (~skippedActions.indexOf(action.name)) {
				return;
			}

			var id = 'io.emmet.' + action.name;
			
			if (!CommandManager.get(id)) {
				// regiester new command only if wasn’t defined previously
				var cmd = ~singleSelectionActions.indexOf(action.name) 
					? actionDecorator(action.name)
					: multiSelectionActionDecorator(action.name);

				CommandManager.register(actionLabel(action), id, cmd);
			}

			var shortcut = keymap[action.name];
github emmetio / brackets-emmet / main.js View on Github external
activeEditor._handleTabKey();
				}
				return df.resolve();
			}
		}

		if (action == 'insert_formatted_line_break') {
			var activeEditor = editor.editor;
			var allowAction = !activeEditor.hasSelection() && ~lineBreakSyntaxes.indexOf(editor.getSyntax());
			if (!allowAction) {
				// handle Enter key for limited syntaxes only
				return df.reject();
			}
		}

		return emmet.run(action, editor);
	}
github emmetio / brackets-emmet / interactive.js View on Github external
updateTag: function(editor) {
			var info = editorUtils.outputInfo(editor);
			var selCtx = selectionContext(editor, info);

			// show prompt dialog that will update each
			// tag from selection
			prompt.show({
				label: 'Enter Abbreviation',
				editor: editor.editor,
				update: function(abbr) {
					abbr = abbr.trim();
					var tag, replaced;
					var didUpdate = false;
					for (var i = selCtx.length - 1, ctx; i >= 0; i--) {
						ctx = selCtx[i];
						tag = null;

						if (abbr) {
github emmetio / brackets-emmet / interactive.js View on Github external
function selectionContext(editor, info) {
		info = info || editorUtils.outputInfo(editor);
		var result = [];
		editor.exec(function(i, sel) {
			var r = range(sel);
			var tag = htmlMatcher.tag(info.content, r.start);
			if (!r.length() && tag) {
				// no selection, use tag pair
				r = utils.narrowToNonSpace(info.content, tag.range);
			}

			var out = {
				selection: r,
				tag: tag,
				caret: r.start,
				syntax: info.syntax,
				profile: info.profile || null,
				counter: i + 1,
github emmetio / brackets-emmet / interactive.js View on Github external
editor.exec(function(i, sel) {
			var r = range(sel);
			var tag = htmlMatcher.tag(info.content, r.start);
			if (!r.length() && tag) {
				// no selection, use tag pair
				r = utils.narrowToNonSpace(info.content, tag.range);
			}

			var out = {
				selection: r,
				tag: tag,
				caret: r.start,
				syntax: info.syntax,
				profile: info.profile || null,
				counter: i + 1,
				contextNode: actionUtils.captureContext(editor, r.start)
			};

			if (r.length()) {
github emmetio / brackets-emmet / main.js View on Github external
function runAction(action, df) {
		if (!isEnabled) {
			return df.reject().promise();
		}

		// do not handle Tab key for unknown syntaxes
		if (action == 'expand_abbreviation_with_tab') {
			var syntax = editor.getSyntax();
			var activeEditor = editor.editor;
			// do not allow tab expander in JS/JSX since it breakes native
			// snippets and indentation. Hardcode this exception for now
			if (syntax === 'jsx' || !preferences.getPreference('tab') || !resources.hasSyntax(syntax)) {
				return df.reject();
			}

			// do not expand abbreviation if there’s a selection
			if (activeEditor.hasSelection()) {
				if (activeEditor._handleTabKey) {
					activeEditor._handleTabKey();
				}
				return df.resolve();
			}
		}

		if (action == 'insert_formatted_line_break') {
			var activeEditor = editor.editor;
			var allowAction = !activeEditor.hasSelection() && ~lineBreakSyntaxes.indexOf(editor.getSyntax());
			if (!allowAction) {
github emmetio / brackets-emmet / editor.js View on Github external
end = (typeof start == 'undefined') ? this.getContent().length : start;
			}
			if (typeof start == 'undefined') {
				start = 0;
			}

			value = normalize(value);
			
			// indent new value
			if (!noIndent) {
				var pad = utils.getLinePaddingFromPosition(this.getContent(), start);
				value = utils.padString(value, pad);
			}
			
			// find new caret position
			var tabstopData = tabStops.extract(value, {
				escape: function(ch) {
					return ch;
				}
			});
			value = tabstopData.text;

			var firstTabStop = tabstopData.tabstops[0] || {start: value.length, end: value.length};
			firstTabStop.start += start;
			firstTabStop.end += start;

			var doc = this.editor.document;
			start = this._posFromIndex(start);
			end = this._posFromIndex(end);

			var oldValue = doc.getRange(start, end);
github emmetio / brackets-emmet / interactive.js View on Github external
editor.exec(function(i, sel) {
			var r = range(sel);
			var tag = htmlMatcher.tag(info.content, r.start);
			if (!r.length() && tag) {
				// no selection, use tag pair
				r = utils.narrowToNonSpace(info.content, tag.range);
			}

			var out = {
				selection: r,
				tag: tag,
				caret: r.start,
				syntax: info.syntax,
				profile: info.profile || null,
				counter: i + 1,
				contextNode: actionUtils.captureContext(editor, r.start)
			};

			if (r.length()) {
				var pasted = utils.escapeText(r.substring(info.content));
				out.pastedContent = editorUtils.unindent(editor, pasted);
			}

			result[i] = out;
		}, true);