monaco-editor-textmate-test
v2.1.1
Published
Wire monaco-textmate with monaco-editor
Downloads
4
Maintainers
Readme
Wire monaco-textmate
with monaco-editor
Install
npm i monaco-editor-textmate
Please install peer dependencies if you haven't already
npm i monaco-textmate monaco-editor onigasm
Usage
import { loadWASM } from 'onigasm' // peer dependency of 'monaco-textmate'
import { Registry } from 'monaco-textmate' // peer dependency
import { wireTmGrammars } from 'monaco-editor-textmate'
export async function liftOff() {
await loadWASM(`path/to/onigasm.wasm`) // See https://www.npmjs.com/package/onigasm#light-it-up
const registry = new Registry({
getGrammarDefinition: async (scopeName) => {
return {
format: 'json',
content: await (await fetch(`static/grammars/css.tmGrammar.json`)).text()
}
}
})
// map of monaco "language id's" to TextMate scopeNames
const grammars = new Map()
grammars.set('css', 'source.css')
grammars.set('html', 'text.html.basic')
grammars.set('typescript', 'source.ts')
await wireTmGrammars(monaco, registry, grammars)
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'html, body {',
' margin: 0;',
'}'
].join('\n'),
language: 'css' // this won't work out of the box, see below for more info
})
}
Limitation
monaco-editor
distribution comes with built-in tokenization support for few languages. Because of this monaco-editor-textmate
cannot
be used with monaco-editor
without some modification, see explanation of this problem here.
Solution
To get monaco-editor-textmate
working with monaco-editor
, you're advised to use Webpack with monaco-editor-webpack-plugin
which allows you to control which of "built-in" languages should monaco-editor
use/bundle, leaving the rest.
With that control you must exclude any/all languages for which you'd like to use TextMate grammars based tokenization instead.
License
MIT