{"id":18292175,"url":"https://github.com/emmetio/codemirror-plugin","last_synced_at":"2025-04-05T10:31:13.595Z","repository":{"id":47552169,"uuid":"91388212","full_name":"emmetio/codemirror-plugin","owner":"emmetio","description":"Emmet plugin for CodeMirror web editor","archived":false,"fork":false,"pushed_at":"2022-07-21T00:18:11.000Z","size":1723,"stargazers_count":74,"open_issues_count":9,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-29T22:37:58.314Z","etag":null,"topics":["codemirror","emmet"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emmetio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"emmetio","patreon":null,"open_collective":"emmet","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-05-15T21:53:44.000Z","updated_at":"2024-08-18T00:41:02.000Z","dependencies_parsed_at":"2022-09-26T19:31:21.133Z","dependency_job_id":null,"html_url":"https://github.com/emmetio/codemirror-plugin","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmetio%2Fcodemirror-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmetio%2Fcodemirror-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmetio%2Fcodemirror-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmetio%2Fcodemirror-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emmetio","download_url":"https://codeload.github.com/emmetio/codemirror-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247324627,"owners_count":20920683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemirror","emmet"],"created_at":"2024-11-05T14:17:02.756Z","updated_at":"2025-04-05T10:31:12.018Z","avatar_url":"https://github.com/emmetio.png","language":"TypeScript","funding_links":["https://github.com/sponsors/emmetio","https://opencollective.com/emmet"],"categories":[],"sub_categories":[],"readme":"# Emmet extension for CodeMirror editor\n\n[CodeMirror](http://codemirror.net/) extension that adds [Emmet](https://emmet.io) support to text editor.\n\n## How to use\n\nThis extension can be installed as a regular npm module:\n\n```\nnpm i @emmetio/codemirror-plugin\n```\n\nThe package comes in two flavors: a stand-alone browser bundle and ES/CommonJS modules that you can use in your app.\n\nIf you’re building an app, you can use extension like this:\n\n```js\nimport CodeMirror from 'codemirror';\nimport emmet from '@emmetio/codemirror-plugin';\n\n// Register extension on CodeMirror object\nemmet(CodeMirror);\n\n// Create editor instance and provide keymap for Emmet actions\nconst editor = CodeMirror.fromTextArea(document.getElementById('code'), {\n    mode : \"text/html\",\n    extraKeys: {\n        'Tab': 'emmetExpandAbbreviation',\n        'Esc': 'emmetResetAbbreviation',\n        'Enter': 'emmetInsertLineBreak'\n    }\n});\n```\n\nFor a stand-alone, basic usage, simply add `dist/browser.js` file into your page:\n\n```html\n\u003cscript src=\"./node_modules/codemirror/lib/codemirror.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./node_modules/@emmetio/codemirror-plugin/dist/browser.js\"\u003e\u003c/script\u003e\n\n\u003cform\u003e\n    \u003ctextarea id=\"code\" name=\"code\"\u003e\u003c/textarea\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\nvar editor = CodeMirror.fromTextArea(document.getElementById(\"code\"), {\n    mode : \"text/html\",\n    extraKeys: {\n        'Tab': 'emmetExpandAbbreviation',\n        'Esc': 'emmetResetAbbreviation',\n        'Enter': 'emmetInsertLineBreak'\n    }\n});\n\u003c/script\u003e\n```\n\n## Expanding abbreviations\n\nEmmet extension can _track abbreviations_ that user enters in some known syntaxes like HTML and CSS. When user enters something that looks like Emmet abbreviation, extension starts abbreviation tracking (adds `emmet-abbreviation` class to a text fragment). WHen abbreviation becomes _complex_ (expands to more that one element), it displays abbreviation preview:\n\n![Emmet abbreviation example](./example/emmet-expand.gif)\n\nRun `emmetExpandAbbreviation` command to expand tracked abbreviation or `emmetResetAbbreviation` to reset it. Suggested key bindings are \u003ckbd\u003eTab\u003c/kbd\u003e for `emmetExpandAbbreviation` and \u003ckbd\u003eEsc\u003c/kbd\u003e for `emmetResetAbbreviation`.\n\nAbbreviation tracker is _context-aware_: it detect current syntax context and works only where abbreviation expected. For example, in HTML syntax it works in plain text context only and doesn’t work, for example, in attribute value or tag name.\n\nIf you already have abbreviation in editor, you can _capture_ it to continue editing: run `emmetCaptureAbbreviation` action (\u003ckbd\u003eCtrl-Space\u003c/kbd\u003e by default):\n\n![Emmet abbreviation capturing](./example/emmet-capture.gif)\n\n### Abbreviation mode\n\nIn case if abbreviation tracking is unavailable or you want to give user an opportunity to enter and expand abbreviation with interactive preview, a special _abbreviation mode_ is available. Run `emmetEnterAbbreviationMode` command to enter this mode: everything user types will be tracked as abbreviation with preview and validation. Use `emmetExpandAbbreviation` command to expand it or `emmetResetAbbreviation` to quit abbreviation mode.\n\n### JSX abbreviation\n\nIn order to not distract user with unexpected abbreviation tracking, in JSX syntax Emmet requires to prefix abbreviation with `\u003c` to provide more natural context where JSX markup is required.\n\n![Emmet JSX example](./example/emmet-jsx.gif)\n\n## Tag pair marking and renaming\n\nExtension is able to mark paired open and close HTML tags in editor: it adds `emmet-class-tag` and `emmet-close-tag` name to matched tag names. Optionally, extension can display preview of matching open tag when cursor is inside close tag.\n\nWhen tag pair tag marking is enabled, it’s possible to automatically rename tag pair when you update open or close tag:\n\n![Emmet tag pair example](./example/emmet-tag-pair.gif)\n\n## Commands\n\nThe package itself follows CodeMirror extension convention and registers new commands in CodeMirror namespace. In order to use Emmet, you should create CodeMirror instance and provide keymap with the following Emmet actions:\n\n* `emmetExpandAbbreviation` – expand _tracked_ abbreviation from current cursor position (see [Expanding abbreviations](#expanding_abbreviations)).\n* `emmetResetAbbreviation` – reset _tracked_ abbreviation in editor (see [Expanding abbreviations](#expanding_abbreviations)).\n* `emmetEnterAbbreviationMode` – enters abbreviation mode.\n* `emmetInsertLineBreak` – inserts formatted line break if cursor is between tags.\n* `emmetExpandAbbreviationAll` – expands abbreviation from current cursor position. Unlike `emmetExpandAbbreviation`, it doesn’t require tracked abbreviation: it extracts abbreviation from current cursor position and can be used in any document syntax.\n* `emmetWrapWithAbbreviation` — [Wrap with Abbreviation](https://docs.emmet.io/actions/wrap-with-abbreviation/).\n* `emmetBalance`/`emmetBalanceInward` — [Balance](https://docs.emmet.io/actions/match-pair/).\n* `emmetToggleComment` — [Toggle Comment](https://docs.emmet.io/actions/toggle-comment/)\n* `emmetEvaluateMath` — [Evaluate Math Expression](https://docs.emmet.io/actions/evaluate-math/)\n* `emmetGoToNextEditPoint`/`emmetGoToPreviousEditPoint` — [Go to Edit Point](https://docs.emmet.io/actions/go-to-edit-point/)\n* `emmetGoToTagPair` — [Go to Matching Pair](https://docs.emmet.io/actions/go-to-pair/)\n* `emmetIncrementNumberN`/`emmetDecrementNumberN` — [Increment/Decrement Number](https://docs.emmet.io/actions/inc-dec-number/) where `N` is `1`, `01` or `10`.\n* `emmetRemoveTag` — [Remove Tag](https://docs.emmet.io/actions/remove-tag/)\n* `emmetSplitJoinTag` — [Split/Join Tag](https://docs.emmet.io/actions/split-join-tag/)\n* `emmetSelectNextItem`/`emmetSelectPreviousItem` — [Select Item](https://docs.emmet.io/actions/select-item/)\n\n### Options\n\nYou can pass `emmet` object when creating CodeMirror editor instance to modify extension behavior:\n\n```js\nCodeMirror.fromTextArea(document.getElementById(\"code\"), {\n    mode : \"text/html\",\n    lineNumbers : true,\n\n    // Pass Emmet extension options\n    emmet: {\n        mark: true,\n        markTagPairs: true,\n        previewOpenTag: false,\n    }\n});\n```\n\nExtension supports the following options:\n\n* `mark` (boolean or string[]): enables abbreviation tracking and marking in editor. If `true` is provided, it will work in all known syntaxes. You can specify array of syntaxes/modes where abbreviation marking should work; array may include `markup` or `stylesheet` keyword to enable option for all known markup or stylesheet syntaxes.\n* `preview` (boolean or string[]): enable preview of tracked abbreviation. Preview is displayed only when abbreviation will expand in more than one element. Same as with `mark` option, you can enable it for all syntaxes (`true`) or limit it to specified syntaxes or syntax groups.\n* `markTagPairs` (boolean): enable HTML tag pair marking in editor.\n* `previewOpenTag` (boolean): displays open tag preview when cursor is inside its matching closing tag. Preview is displayed only if open tag has attributes and works only if `markTagPairs` is enabled\n* `autoRenameTags` (boolean): automatically rename tag pair when updating open or close tag name. Works only if `markTagPairs` is enabled.\n* `attributeQuotes` (`'single'` or `'double'`): quotes to use in generated HTML attribute values. Default is `'double'`.\n* `markupStyle` (`'html'`, `'xhtml'` or `'xml'`): style for self-closing elements (like `\u003cbr\u003e`) and boolean attributes in HTML syntax.\n* `comments` (boolean): enable automatic tag commenting. When enabled, elements generated from Emmet abbreviation with `id` and/or `class` attributes will receive a comment with these attribute values.\n* `commentsTemplate` (string): commenting template. Default value is `\\n\u003c!-- /[#ID][.CLASS] --\u003e`. Outputs everything between `[` and `]` only if specified attribute name (written in UPPERCASE) exists in element. Attribute name is replaced with actual value. Use `\\n` to add a newline.\n* `bem` (boolean): enable BEM support. When enabled, Emmet will treat class names starting with `-` as _element_ and with `_` as _modifier_ in BEM notation. These class names will inherit `block` name from current or ancestor element. For example, the abbreviation `ul.nav.nav_secondary\u003eli.nav__item` can be shortened to `ul.nav._secondary\u003eli.-item` when this option enabled.\n* `config` (object): Emmet config with snippets and advanced options.\n\n### Emmet config\n\nWith `config` option (see above) you can add custom abbreviation snippets and fine-tune Emmet behavior.\n\nSnippets are grouped by syntax (like `html`, `css`, `pug` etc.) and syntaxes are grouped by type: `markup` or `stylesheet`. You can specify snippets that should be available for all syntaxes in group or specific syntax only.\n\nSnippets are just short aliases for Emmet abbreviations: you either specify shorthand for a larger abbreviation or define shape for a specific element:\n\n```js\nCodeMirror.fromTextArea(document.getElementById(\"code\"), {\n    mode : \"text/html\",\n    lineNumbers : true,\n\n    // Pass Emmet extension options\n    emmet: {\n        config: {\n            // Specify snippets for all markup syntaxes: HTML, XML, Pug etc.\n            markup: {\n                // Shorthand for larger abbreviation\n                foo: 'div.foo\u003esection.bar*3',\n\n                // Define shape of element, looks like recursive abbreviation\n                a: 'a[href title]',\n                br: 'br/'\n            },\n\n            // Specify snippets for specific syntax only\n            html: {\n                nav: 'ul.nav\u003e.nav-item*4\u003ea'\n            }\n        }\n    }\n});\n```\n\nNote that markup and stylesheet snippet definitions are different. Markup snippets are written as Emmet abbreviations (e.g. you simply describe element name and its default attributes) while stylesheet snippets are aliases to CSS properties with optional keywords list, separated by `|` character. These keywords are used in abbreviation resolving process. For more examples, see check out [default Emmet snippets](https://github.com/emmetio/emmet/tree/master/snippets).\n\nSee all available config params in [`GlobalConfig` type](https://github.com/emmetio/emmet/blob/master/src/config.ts#L26).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmetio%2Fcodemirror-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femmetio%2Fcodemirror-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmetio%2Fcodemirror-plugin/lists"}