Deprecated: use codemirror-plugin instead with upcoming Emmet 2.0
To add Emmet support for CodeMirror editor, simply add dist/emmet.js
as a <script>
tag into your HTML page right after CodeMirror script. This script creates global emmetCodeMirror
function but also can be loaded as Require.JS module. You should pass CodeMirror editor instance to emmetCodeMirror()
to add Emmet support.
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode : 'text/html',
// define Emmet output profile
profile: 'xhtml'
});
emmetCodeMirror(editor);
Available profiles are: html, xhtml, xml, but you can create your own output profile with
emmetCodeMirror.emmet.loadProfiles({name: options})
.
See profile.js for a list of available options.
Cmd-E
orTab
: Expand abbreviationCmd-D
: Balance Tag (matches opening and closing tag pair)Shift-Cmd-D
: Balance Tag InwardShift-Cmd-A
: Wrap With AbbreviationCtrl-Alt-Right
: Next Edit PointCtrl-Alt-Left
: Previous Edit PointCmd-L
: Select lineCmd-Shift-M
: Merge LinesCmd-/
: Toggle CommentCmd-J
: Split/Join TagCmd-K
: Remove TagShift-Cmd-Y
: Evaluate Math ExpressionCtrl-Up
: Increment Number by 1Ctrl-Down
: Decrement Number by 1Ctrl-Alt-Up
: Increment Number by 0.1Ctrl-Alt-Down
: Decrement Number by 0.1Shift-Ctrl-Up
: Increment Number by 10Shift-Ctrl-Down
: Decrement Number by 10Shift-Cmd-.
: Select Next ItemShift-Cmd-,
: Select Previous ItemCmd-B
: Reflect CSS Value
The emmetCodeMirror()
function simply adds default Emmet action keybindings to editor instance. If you want your own keybindings or disable some of them, simply pass keymap (object) as second argument to emmetCodeMirror()
method:
emmetCodeMirror(editor, {
'Tab': 'emmet.expand_abbreviation_with_tab',
'Cmd-Alt-B': 'emmet.balance_outward'
});
See defaultKeymap
for available actions. The default keymap is exposed as emmetCodeMirror.defaultKeymap
property.
NB: The Cmd
key will be automatically replaced with Ctrl
on non-OSX platforms.
This plugin uses gulp.js as build tool:
- Install Node.JS and NPM.
- Install Gulp.js:
npm install -g gulp
- Clone this repo and
cd
to cloned dir: - In cloned repo run
npm install
andgulp
to build project. The build tool will createdist/emmet.js
file.