Vueはコードのハイライトを実現するためにモナコを使用しています

Vueはコードのハイライトを実現するためにモナコを使用しています

Vue 言語と要素コンポーネントを使用して、コード コンテンツの入力を必要とし、ハイライト表示が可能で、異なる言語を切り替え、キーワード補完をサポートし、異なるバージョン間でコードを左右に比較できるオンライン コード エディターを作成する必要があります。これが要件です。

なぜモナコが選ばれたのかについては、vue(要素)のコードハイライトプラグインの包括的な比較をご覧ください。

さあ、始めましょう!

まず、monaco-editorコンポーネントとmonaco-editor-webpack-pluginコンポーネントをダウンロードする必要があります。

npm でモナコエディターをインストールします
npm で monaco-editor-webpack-plugin をインストールします

もちろん、npm のダウンロードは非常に遅いので、Taobao などの国内ミラーに変更してください。案の定、速度は急速に上昇しました。

npm をインストール -g cnpm --registry=https://registry.npm.taobao.org
cnpm インストール

cnpm でモナコエディターをインストールします
cnpm で monaco-editor-webpack-plugin をインストールします

ディレクトリ構造はnode_modulesで確認できます。

コアコードは以下のとおりです

まず、他のページがインポートして呼び出すコンポーネントを記述します。

コードエディター.vue

<テンプレート>
 <div class="code-container" ref="container"></div>
</テンプレート>

<スクリプト>
 "monaco-editor" から monaco として * をインポートします。
 sqlStr = とします
 「すべてのエグゼクティブプランを変更するパーセントを追加し、プライマリプリントを存在しますIdentityColルール列Schema compute index select constraint inners session_user contains cantable cantable cantable intersect setuser conting into statistics cruse statistics cross system _user current textsize current Sequal Default Nullif Union Delete of Uniquire Deny Update Desc Offsets UpdateText Diskを使用します。
 エクスポートデフォルト{
 名前: "codeEditor",

 小道具: {
  オプション:
  タイプ: オブジェクト、
  デフォルト() {
   戻る {
   言語: "java", // シェル、SQL、Python
   readOnly: true // 編集できません};
  }
  },

  価値: {
  タイプ: 文字列、
  デフォルト: ""
  }
 },

 データ() {
  戻る {
  モナコインスタンス: null、
  プロバイダー: null、
  ヒント: [
   「選択」、
   "入れる"、
   "消去"、
   "アップデート"、
   「テーブルの作成」、
   「テーブルを削除」
   「テーブルの変更」
   「ビューの作成」、
   「ドロップビュー」、
   「インデックスを作成」
   「インデックスを削除」
   「プロシージャの作成」、
   「ドロップ手順」、
   「トリガーを作成」
   「ドロップトリガー」
   「スキーマの作成」、
   「スキーマを削除」
   「ドメインの作成」、
   「ドメインの変更」、
   「ドメインを削除」
   "付与"、
   "拒否"、
   "取り消す"、
   "専念"、
   「ロールバック」、
   「トランザクションの設定」
   "宣言する"、
   「説明」、
   "開ける"、
   "フェッチ"、
   "近い"、
   "準備する"、
   "実行する"、
   "説明する"、
   "形状"、
   「順序」
  ]
  };
 },
 作成された() {
  this.initHints();
 },
 マウント() {
  これを初期化します。
 },
 破棄する前に() {
  このメソッドは、次の例のように動作します。
 },

 メソッド: {
  破棄() {
  (this.monacoInstance) の場合 {
   (this.monacoInstance.getModel()) の場合 {
   この.monacoInstance.getModel().dispose();
   }
   このモナコインスタンスを破棄します。
   this.monacoInstance は null です。
   if (this.provider) {
   このプロバイダーは、
   this.provider = null
   }
  }
  },
  initHints() {
  sqlArr = sqlStr.split(" "); とします。
  this.hints = Array.from(new Set([...this.hints, ...sqlArr])).sort();
  },
  初期化() {
  that = this とする;
  これを破棄します。
  createCompleters を textUntilPosition => { にします。
   //特殊文字をフィルタリングする let _textUntilPosition = textUntilPosition
   .replace(/[\*\[\]@\$\(\)]/g, "")
   .replace(/(\s+|\.)/g, " ");
   //配列に分割 let arr = _textUntilPosition.split(" ");
   //現在の入力値を取得します。let activeStr = arr[arr.length - 1];
   //入力値の長さを取得します。let len ​​= activeStr.length;

   //編集領域の既存のコンテンツを取得します。let rexp = new RegExp('([^\\w]|^)'+activeStr+'\\w*', "gim");
   match = that.value.match(rexp) とします。
   _hints = !match ? [] : match.map(ele => { とします。
   rexp = new RegExp(activeStr, "gim"); とします。
   search = ele.search(rexp) とします。
   ele.substr(検索)を返す
   })

   // 現在の入力値に一致する要素を検索します。let hints = Array.from(new Set([...that.hints, ..._hints])).sort().filter(ele => {
   rexp = new RegExp(ele.substr(0, len), "gim"); とします。
   戻り値 match && match.length === 1 && ele === activeStr || ele.length === 1
    ? 間違い
    : activeStr.match(rexp);
   });
   //コンテンツヒントを追加 let res = hints.map(ele => {
   戻る {
    ラベル: ele,
    種類: that.hints.indexOf(ele) > -1 ? monaco.languages.CompletionItemKind.Keyword : monaco.languages.CompletionItemKind.Text、
    ドキュメント: ele、
    挿入テキスト:ele
   };
   });
   res を返します。
  };
  this.provider = monaco.languages.registerCompletionItemProvider("sql", {
   provideCompletionItems(モデル、位置) {
   var textUntilPosition = model.getValueInRange({
    開始行番号: 位置.行番号、
    開始列: 1,
    終了行番号: 位置.行番号、
    endColumn: 位置.列
   });
   var suggestions = createCompleters(textUntilPosition);
   戻る {
    提案: 提案
   };

   createCompleters(textUntilPosition) を返します。
   }
  });

  // エディターインスタンスを初期化します this.monacoInstance = monaco.editor.create(this.$refs["container"], {
   値: this.value、
   テーマ: 「vs-dark」、
   自動インデックス: true、
   ...このオプション
  });

  // エディターコンテンツの変更イベントをリッスンします this.monacoInstance.onDidChangeModelContent(() => {
   this.$emit("contentChange", this.monacoInstance.getValue());
  });
  }
 }
 };
</スクリプト>

<style lang="scss" スコープ>
 .コードコンテナ{
 幅: 100%;
 高さ: 100%;
 オーバーフロー: 非表示;
 境界線: 1px 実線 #eaeaea;
 .monaco-editor .scroll-decoration {
  ボックスシャドウ: なし;
 }
 }
</スタイル>

このページで使用するインポートページ

インデックス.vue

<テンプレート>
 <div class="コンテナ">
 <コードエディタ
  :options="オプション"
  :value="コンテンツ"
  @contentChange="コンテンツ変更"
  スタイル="高さ: 400px; 幅: 600px;"
 </コードエディター>
 </div>
</テンプレート>

<スクリプト>
 「@/components/CodeEditor」からCodeEditorをインポートします。
 エクスポートデフォルト{
 名前: "SQLEditor",
 コンポーネント:
  コードエディター
 },
 データ() {
  戻る {
  コンテンツ: ""、
  オプション:
   言語: "sql",
   テーマ: 'vs'、
   読み取り専用: false
  }
  };
 },
 作成された() {},
 メソッド: {
  // バインディング エディターの値の変更 contentChange(val) {
  this.content = val;
  }
 }
 };
</スクリプト>


<スタイル スコープ lang="scss">
 。容器 {
 テキスト配置: 左;
 パディング: 10px;
 }
</スタイル>

効果は以下のとおりです

コードは、以下に示すように、自動的に効果を促します。

コードの強調表示効果、コードセグメントの折りたたみ効果、右側のプレビュー効果は次のとおりです。

上記は、Vue がモナコを使用してコードのハイライトを実現する方法の詳細です。Vue のコードのハイライトの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue コード強調プラグインの総合的な比較と評価
  • Vueでhighlight.jsを使用してコードのハイライトとクリックコピーを実現する

<<:  Linux でのログ サーバーの設定に関するグラフィック チュートリアル

>>:  CentOS 6.5 インストール mysql5.7 チュートリアル

推薦する

Vue3 の使用 (パート 1) Vue CLI プロジェクトの作成

目次1. 公式ドキュメント2. Vue CLIプロジェクトを作成する1. Vue CLIをインストー...

Spring Boot のパッケージ化と Docker リポジトリへのアップロードの詳細な手順

重要な注意: この記事を読む前に、Docker コンテナに関する知識と、一般的な Docker 操作...

JavaScript ウェブページ入門開発詳細説明

パート3: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...

Win7x64でのMySQL 5.7.18解凍版のインストール方法

関連記事: Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールする...

CSS で透明なグラデーション効果を実装するためのサンプルコード

Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...

TCPパフォーマンスチューニングの実装原理とプロセス分析

3ウェイハンドシェイクフェーズクライアントSYNパケットの再試行回数sysctl -w net.ip...

Node.jsをゼロから学ぶ

目次URL モジュール1. 解析メソッド2. フォーマット方法3. 解決方法イベントモジュール(イベ...

Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析

Tomcatはプロジェクトにアクセスします。通常はIP + ポート + プロジェクト名です。 Ngi...

MySQL GRANT ユーザー認証の実装

承認とは、ユーザーに特定の権限を付与することです。たとえば、新しく作成したユーザーに、すべてのデータ...

Linux でプロセスを効果的に管理するための 8 つのコマンド

序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...

Vite と Vue CLI の長所と短所

Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...

よく使われるHTMLタグのインライン要素とブロックレベル要素の詳細な説明

ブロック要素HTMLタグ分類の詳細* 住所 - 住所* blockquote - ブロック引用* c...

React NativeのScrollViewプルダウンリフレッシュ効果

この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...

C++ TpeScriptシリーズのジェネリックについて

目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...

独自のネイティブ JavaScript ルーターを作成する方法

目次序文導入JavaScript 履歴 API独自のネイティブJSルーティングを実装するHistor...