Codeの構文ハイライトのカスタマイズと、カスタマイズした設定を含んだ配色テーマ拡張機能を自作する方法を見ていこう。Code)のワークベンチの配色を設定する方法を取り上げた。今回は、前回に説明できなかったエディタ画面の構文ハイライトなどについて見ていこう。1.17.2(64ビット)を使用している。構文ハイライトを設定する方法には大きく分けて次の2つがある。settings.jsonファイルのeditor.tokenColorCustomizations項目に関数/変数などのトークンごとに色を指定する自作の配色テーマを作成する簡単なのは前者の方法だ。そこで、まずはsettings.jsonファイルでの構文ハイライトの指定方法を見てみよう。Codeの[ファイル]メニューから[基本設定]−[設定]を選択すると(macOSの場合は[Code]メニューの[基本設定]−[設定])、設定画面がエディタに表示される。Codeの設定を行う「ワークスペース設定」を切り替えられるが、ここではユーザー設定のレベルで構文ハイライトを設定していくことにする。構文ハイライトはeditor.tokenColorCustomizations項目に記述する。右側のペーンにはsettings.jsonファイルの内容が表示されているので、ここに構文ハイライトの設定を直接記述していく(なお、ユーザー設定を保存するsettings.jsonファイルはユーザーのホームディレクトリにある.vscodeディレクトリ以下に保存されている)。構文ハイライトは前述したように、editor.tokenColorCustomizations項目に指定していく。指定可能な項目は次のものだ。各項目については、以下のようにしてその色とスタイルを指定できる。構文ハイライトで使用する色のみを指定するには、その値をダブルクオーテーションで囲んで「"#RRGGBB"」「"#RGB"」のように指定する。スタイルも指定するには、foreground項目とfontStyle項目を使って、色とスタイルを指定する。underline"など)。以下にハイライトの設定例を示す(これは例なので、実際に見やすい配色かどうかは配慮していない)。上の例では、コメントと関数については色とスタイルを指定している。他の項目については色だけを指定している。この指定を行った状態のC#コードがどのように表示されるかを以下に示す。独自の構文ハイライトの設定を行った後のエディタ画面editor.tokenColorCustomizations項目で設定を行うことで、どんな色やスタイルで構文ハイライトを行うかを比較的簡単に指定できる。上の例ではtextMateRules項目を使用していなかった。この項目ではより詳細な設定を行える。そこで次にこの項目について見てみよう。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。