monoacoはvscode関連の文法を使って、ブラウザにハイライトを表示します.

3790 ワード

アングラー textmate

説明

モノラックにvscodeを使用させるためのテーマ

実現を試みる
テーマの直接変換

最初は、両者のテーマのフォーマットが違っていると思いましたが、変換を試みたところ、やはり正常に

を使用できないことが分かりました.

の結果、2つのtokenは根本的に違っています.つまり、分割コードの各部分の命名は違います.
monearch変換textmate

で、モノラックは自分でデザインしたものを使って文法のハイライトを実現していますが、vscodeはtextmateのフォーマット

を使っています.
textmateはりんごの種類です.

は、変換ロジックを実現すれば、textmate->monachを実現すると考えられています.それでは、monoacoはvscodeのテーマを使用することができます.(tokenが同じですので)

双方の論理を学んだ後、posixとpcre正則の転換を研究したところ、致命的な問題が発見されました.monoachは後の行を実行できないと断言できませんでした.これは普通の転換がまったく実現できませんでした.
最終解決策

は、元のmonach

の代わりにvs scode-textmateを使用する.

実はこれは研究を始める時ありましたが、ネットでは直接cを呼び出すことができないので、wasmを使う効率はデスクトップより低いです.

の最終性能はこれです.(?<=})を見ました.vscode-textmateはbenchmarkがあります.波をテストしました.jsの解析はデスクトップの端より二倍遅く、他のものはデスクトップの端よりも速いです.ちょっと分かりにくいです.


jQuery v2.0.3

TOKENIZING 250971 lines using grammar source.js

Oniguruma: 550 ms., Onigasm: 381 ms. (1.4x faster)

Bootstrap CSS v3.1.1

TOKENIZING 127005 lines using grammar source.css

Oniguruma: 217 ms., 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 source.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 source.css

Oniguruma: 248 ms., Onigasm: 196 ms. (1.3x faster)

原理を実現する

このスキームはmonoaco-tmから得られたものであるが、最終的には主題使用を完全にし、vscodeからシームレスに移植することができ、言語プラグインを完備し、vscodeからtmLanguageのプラグインをシームレスに移行させ、言語点注入をサポートする

grammarは、構文を解析するために用いられ、この言語を呼び出したときに、対応する構文ファイル

をロードする.
具体的には実現が必要ですmonaco.languages.EncodedTokensProviderインターフェースを転送します.setTokensProviderはパラメータをしますsetTokensProviderはsetMonarchTokensProviderの代わりになりました.

configrationは、折りたたみ、括弧、注釈などを配置するためのものです.元のものと同じ

です.

themeは、主題のロードを要求する

である.
文法の解析はvscode-textmateになりますので、伝統的な方法でテーマをロードすることはできません.RegistryでもらいますColorMapは次に主題に定義される.

最後に、言語を傍受することによって、対応する構文解析ファイルを読み込みます.
使用

ngの下ですでにカプセル化されています.依存パケットの使用は、ngフレームではなく、

を使用しても少し修正できます.

パケットアドレスcyia-ngx-common

はモジュールCyiaMonacoTextmateModuleを導入し、コンポーネント内の依存注入によってCyiaMonacoTextmateServiceサービス

を取得する.


 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);

 }