\n\nEmmet Support for [Monaco Editor](https://github.com/Microsoft/monaco-editor), based on [vscode-emmet-helper](https://github.com/microsoft/vscode-emmet-helper)\n\n## Advantage\n\n- Almost the same as VSCode's built-in emmet, integrated with completion provider\n- Various languages support\n\n## Install\n\n```shell\n$ npm install emmet-monaco-es\n```\n\n## Usage\n\n#### NOTE\n\nThe `emmet` functionality was bound to language features not to a specific editor instance.\n\n- `emmetHTML` works for `HTML` compatible languages, like `PHP`, for `html` only by default\n- `emmetCSS` works for `CSS` compatible languages, like `LESS` / `SCSS`, for `css` only by default\n- `emmetJSX` works for `JSX` compatible languages, like `JavaScript` / `TypeScript` / `MDX`, for `javascript` only by default\n\n_Follow [this](https://github.com/microsoft/monaco-editor/issues/264#issuecomment-654578687) guide to make Monaco Editor support `TSX`_\n\n**Initialize emmet should BEFORE all monaco editor instance creation**\n\n#### ESM\n\n```javascript\nimport { emmetHTML, emmetCSS, emmetJSX, expandAbbreviation, registerCustomSnippets } from 'emmet-monaco-es'\n\n// `emmetHTML` , `emmetCSS` and `emmetJSX` are used the same way\nconst dispose = emmetHTML(\n // monaco-editor it self. If not provided, will use window.monaco instead.\n // This could make the plugin support both ESM and AMD loaded monaco-editor\n monaco,\n // languages needs to support html markup emmet, should be lower case.\n ['html', 'php'],\n)\n\n// run it if you want to dispose emmetHTML.\n// NOTE: all languages specified will be disposed.\ndispose()\n\n// internal expand API, if you want to extend functionality with emmet\n// check out the emmet repo https://github.com/emmetio/emmet for how to use it\nexpandAbbreviation('a', { type: 'markup', syntax: 'html' }) // \nexpandAbbreviation('fz14', { type: 'stylesheet', syntax: 'css' }) // font-size: 14px;\n\n// register custom snippets\nregisterCustomSnippets('html', {\n ull: 'ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }',\n oll: '
Will only work in html
',\n ran: '{ Wrap plain text in curly braces }',\n})\n```\n\n#### Browser\n\n```html\n\n\n```\n\n## External Syntax Highlighters\n\nBy default, emmet-monaco-es uses Monaco's built-in Monarch tokenizer to detect valid abbreviation locations. When using an external syntax highlighter (e.g. [shiki](https://github.com/shikijs/shiki)), Monarch tokens are unavailable, and emmet will not work correctly.\n\nPass `{ tokenizer: 'standard' }` as the options argument to use Monaco's `StandardTokenType` API instead:\n\n```javascript\nemmetHTML(monaco, ['html'], { tokenizer: 'standard' })\nemmetCSS(monaco, ['css'], { tokenizer: 'standard' })\nemmetJSX(monaco, ['javascript'], { tokenizer: 'standard' })\n```\n\n## Limitation\n\nDoes **NOT** support Emmet for embed CSS inside HTML / JSX / TSX\n\n## License\n\nMIT","users":{}}
![\"Downloads\"](\"https://img.shields.io/npm/dm/emmet-monaco-es.svg\")
\n ![\"Version\"](\"https://img.shields.io/npm/v/emmet-monaco-es.svg\")
\n ![\"License\"](\"https://img.shields.io/npm/l/emmet-monaco-es.svg\")
\n