instructions

  • In order for Monaco to use the theme of VS Code

To attempt (a detour).

A direct transformation of the subject

  • At first, I thought the format of the two themes was different, but after trying to convert, I found that they still could not be used normally
  • It turns out that the two tokens are fundamentally different, that is, each part of the partition code is named differently

Monarch conversion textmate

  • It is found that Monaco uses its own Monarch design to achieve syntax highlighting, but VS code uses the format of TextMate

TextMate is the Apple kind

  • Therefore, it occurred to me that if a conversion logic was implemented, namely textMate -> MONARCH, then Monaco could use the theme of VSCODE (because the token is the same).
  • When learning the logic of both sides, study POSIX and PCRE regular conversion, when the event, found a fatal problem.. Monach cannot implement a postline assertion ((? < =})), which makes normal transformations impossible to implement. Maybe Lifetime Series)

Final Solution

  • Use VSSCODE-TextMate instead of the original Monarch
  • In fact, this has been used since the beginning of the study, but it was stated on the web that the efficiency of using WASM is lower than that of the desktop because it cannot call C directly, so there is no limited consideration (a little bit egotism…).
  • And finally the performance piece, you seevscode-textmateThere arebenchmarkIn addition to JS parsing is twice as slow as the desktop, the others are even faster than the desktop… It’s a little confusing (I don’t know if I made a mistake in my research, if I made a mistake, please clap the brick)
JQuery V2.0.3 Tokenizing 250971 Lines Using Grammar Source. JQuery V2.0.3 Tokenizing 250971 Lines Using Grammar Sources.js Oniguruma: 550 ms., Onigasm: 381 ms. (1.4x Faster) Bootstrap CSS V3.1.1 Tokenizing 127005 Lines Using Grammar Source. CSS Oniguruma: 217ms., Onigasm: 91 ms. (2.4x Faster) vscode.d.ts TOKENIZING 264938 lines using grammar source.ts Oniguruma: 356 ms., Onigasm: 191 ms. (1.9x Faster) JSON TOKENIZING 103784 lines using grammar sources.ts Oniguruma: 312 ms., Onigasm: 185 ms. (1.7x Faster) Bootstrap CSS V3.1.1 Minified Tokenizing 99967 Lines Using Grammar Source. CSS Oniguruma: 231 ms., Onigasm: 167 MS. (1.4X Faster) JQuery V2.0.3 Minified Tokenizing 83618 Lines Using Grammar Source. JS Oniguruma: 254 ms., Onigasm: 480 ms. (1.9x slower) Bootstrap with Multi-Byte Minified Tokenizing 116201 Lines Using Grammar Sourt.css 146X MS., ONIGASM: 146X MS. (1.3X Faster)

Realize the principle of

  • This solution is derived from Monaco-TM, but ultimately improves the use of themes, seamless migration of themes from VS Code, language plug-ins, seamless migration of TMLanguage plug-ins from VS Code, and support for language point injection
  • Grammar is used to parse grammars, and the corresponding grammar file is loaded when the language is called

Specific needs to be implemented
monaco.languages.EncodedTokensProviderThe interface to
setTokensProviderDo parameter

SetToKensProvider replaces SetMonarchToKensProvider

  • Configuration is for things like folds, parentheses, comments… Same as the old Monaco
  • The theme is used to request a load theme

Since the parsing of the syntax is changed to VSCode-TextMate, you cannot use the traditional way to load the topic
RegistryGet in the
ColorMapThen define it for the topic

  • Finally, the corresponding syntax parsing file is loaded when listening to the language used

use

  • The use of dependency packages is already encapsulated under ng, and non-ng frameworks can also be modified to use them
  • Package address cyia – NGX – common
  • The introduction of the moduleCyiaMonacoTextmateModule, which is obtained through dependency injection in the componentCyiaMonacoTextmateServiceservice
this.service.setMonaco(monaco); this.service.init().then(async () => { const themeList = await this.service.getThemeList(); this.themeList = themeList; this.selectedTheme = themeList[1]; const name = await this.service.defineTheme(this.selectedTheme); this.instance = monaco.editor.create( this.containerElement? .nativeElement, { theme: name, value: `let a=6; `, language: this.selectedLanguage, minimap: { enabled: false, }, automaticLayout: true, } ); }); Async change(e) {const Name = await this.service.defineTheme(e); monaco.editor.setTheme(name); }

The relevant address

  • Demo address
  • Demo address source
  • Call package source