テキストエディタの配色を同じにする(2/E)

前回のつづき。

7)<></>の色を薄い水色#8ecbfeにする。

 A)文字のScope名を求める。

  tmTheme Editorで<>の文字に対するScope名を捜すと、次の名前である事が分かった。

 (Scope名がキーで、これを基にtmThemeファイルを検索して色を決めているようである。)

  <> : punctuation.definition.tag.begin.html

  </> : punctuation.definition.tag.end.html

 B)tmThemeファイルをテキストエディタで開き、上記のScope名を下記のようにTag name

  (薄い水色#8ecbfeで指定済)に追加する(200行目)。

ファイルを上書き保存してSublime Text3を起動すると、下記のように薄い水色になった。

 

8)HTMLとCSSは別扱いになっているようで、上記の修正を反映してもATOMとSublime Text3には

 次のような違いがある。

 A)ATOMのCSS表示

 

 B)Sublime Text3のCSS表示

 

9) 少なくとも次の5点は合わせておきたい。

 A)marginなどの定義文字の色(白にする)

 B)leftなど定義の値の色(薄い黄色にする)

 C)数値の色(薄い黄緑にする)

 D)#pageなどid名の色(グレーにする)

 E)上記の画面には表れないがクラスの色(青にする)

10)HTMLの場合と同様に各文字タイプのScope名を捜し、各々の色を変更する。

 なお、上記D)E)は定義がないので末尾に定義を追加する。

 A)Scope名=support.type, support.classで256行目の値を#ffffff(白)に変更

 B)Scope名=support.constantで245行目の値を#f9ee98(薄い黄色)に変更

 C)Scope名=constant.numerictで71行目の値を#90cc99(薄い黄緑色)に変更

 D)Scope名=source.css entity.other.attribute-name.idで459から469行目に追加

 E)Scope名=source.css entity.other.attribute-name.classで470から480行目に追加

なお、source.css+半角空白を追加しておかないと、HTML文にも反映されて前回の修正が

上書されてしまうので、CSS専用の指定とする為に必須である。

 

11)修正後のSublime Text3のCSS表示

 

<個人的な感想>

 まだまだ細かい点で違いはあるが、概ねATOMの配色に近いので、これで良しとする。

思った以上にSublime Text3の配色変更は面倒である・・・。

 

<リンク>

ブログのトップページは、こちら

バタイユゲーム情報班のホームページは、こちら