/vscode-themes-in-monaco

Primary LanguageJavaScript

vscode themes in monaco

POC App to get vscode themes working in Monaco

Procedure to Reproduce

Notes

  • Do NOT use CRA. This implementation relies on configuring webpack.
    • you should NOT load the languages you want to provide tokens for
new MonacoWebpackPlugin({
  // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
  languages: [
    // 'html',
    // 'markdown',
    // 'css',
    // 'scss',
    // 'less',
    //'javascript',
    // 'typescript',
    // 'coffee',
    // 'python',
    // 'json',
  ],
  features: ['!gotoSymbol'],
}),
  • Specific versions of editor and plugins are important.
  • The order of loading WASM and having the theme converted are obviously important.
    • pay special attention to the root component:
// load wasm
(async () => {
  await loadWASM('./onigasm.wasm');
  ReactDOM.render(<App />, document.getElementById('root'));
})();
  • The code of interest is in the CodeEditor component.
  • Themes are taken from vscode
    • Note: some modifications are required here.
  • grammar files are taken from vscode-textmate
  1. install monaco
  2. create the editor component
  3. install monaco-vscode-textmate-theme-converter

Notes from monaco-vscode-textmate-theme-converter

  • VSCode themes are not directly compatible with monaco-editor themes. The problem here is that vscode uses tmGrammar tokens for colorization support while monaco uses its own code editor to generate language tokens. (See more about it here).
  • You can use monaco-textmate to make your monaco-editor tmGrammar compatible.
  • Once the tokens are tmGrammar compatible, you need to convert vscode generated theme data to monaco-editor compatible api. This package does exactly that.
  1. install monaco-textmate

Notes from monaco-textmate

  • monaco-textmate relies on onigasm package to provide oniguruma regex engine in browsers. onigasm itself relies on WebAssembly. Therefore to get monaco-textmate working in your browser, it must have WebAssembly support and onigasm loaded and ready-to-go.
  1. install Onigasm

following their instructions:

  • WASM must be loaded before you use any other feature like OnigRegExp or OnigScanner

So...

  • Add wasm file to public folder and load in index file... the mount root node

and going back to monaco-textmate they say:

Example below is just a demostration of available API. To wire it up with monaco-editor use monaco-editor-textmate.

So then going back to monaco-editor-textmate...

Notes from monaco-editor-textmate

Limitations

  • 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.
  1. install monaco-editor-webpack-plugin

This issue was helpful: zikaari/monaco-editor-textmate#14

Project

To see this in action in a real project checkout contrived