Atomエディタで構文の色を変えて MATLAB を偽装する方法

English version is available here

Atom エディタで、構文の色つけ（シンタックス・ハイライト、シンタックス・カラーリング、 syntax highlight, syntax coloring）を好みの設定に変えるにはどうしたら良いでしょうか？

随分前から色をカスタマイズしたかったのですが、分かりやすい情報がどこにも見つからず、往生しました。参考になったのはこちら。https://stackoverflow.com/questions/44721230/

最近のヴァージョン(v1.13.0)（現在 1.18.0）でかなりstylecs.lessの文法が変わったようで、ネットで見つかるものも古い情報が多いようです。

手順

1. Atomメニュー > Stylesheet... を選ぶと、styles.lessというファイルが開きます。これの下の余白にカスタム設定を CSSで書き込みます。今回始めて勉強しましたが、lessというのはcssをより直感的に書くことができるCSS前処理言語で、{}を使ってネスト構造を書けるのが一つの利点のようです。

2. 色を変更したい言語のファイルをAtomで開いて、色指定をしたい要素の文字にカーソルを置いて、Ctrl + Alt + Shift + P (Windows)、⌘ + ⌥ + P （macOS）を同時に押すと、Scopes at Cursorというバナーが右上に表示されます。同じことをメニューから行う場合は、Packages > Command Palette > Toggle　に続き, 出現したCommand Palette にlog cursor scopeと入力して、Editor: Log Cursor Scope を選びます。

3. 例えば、MATLABのコメント部分で Scopes at Cursor を見るとこのように表示されます。

   • source.matlab
   • meta.function.matlab
   • comment.line.percentage.matlab

4. これをそのまま馬鹿正直に色指定するには次のように書きます。

   // 色指定
   atom-text-editor.editor {
     .syntax--source.syntax--matlab {
       .syntax--meta.syntax--function.syntax--matlab {
         .syntax--comment.syntax--line.syntax--percentage.syntax--matlab {
           color: #ff0000;
         } 
       }
     }
   }

ポイントとしては、このような感じです。

1. atom-text-editor.editorで始める
2. 下位のレベルでは、.を先頭に付ける必要あり
3. 下位のレベルでは、.の後に、syntax--をいちいち挿入する

MATLABの色を再現

上の要領で、MATLABのエディタの配色をAtomで再現しました。

結果比較

Atomで表示したMATLABのコード

こちらはMATLAB本来のカラー設定

CSS

下の例では、MATLABと共に、octave用のシンタックスハイライト（構文配色）も同時に指定しています。

// MATLAB
/*
Atom styles.less file CSS for syntax coloring of MATLAB language.
*/
atom-text-editor.editor {
  .syntax--source.syntax--matlab, .syntax--source.syntax--octave {
    .syntax--meta.syntax--variable.syntax--other.syntax--valid.syntax--matlab {
      color: #000000; //black
    }

    .syntax--variable.syntax--other.syntax--valid.syntax--octave {
      color: #000000; //black
    }

    .syntax--constant.syntax--language,
    .syntax--constant.syntax--numeric {
      color: #000000; //black
    }

    // Strings
    .syntax--string.syntax--quoted.syntax--single,
    .syntax--constant.syntax--character.syntax--escape,
    .syntax--punctuation.syntax--definition.syntax--string.syntax--end,
    .syntax--punctuation.syntax--definition.syntax--string.syntax--begin {
      color: #A020F0; // red
    }



    // keywords
    //.syntax--storage.syntax--type.syntax--function.syntax--matlab,
    .syntax--storage.syntax--type,
    .syntax--keyword.syntax--control {
      color: #0000FF; //blue
      font-weight: normal;
    }

    // Comments %, %%
    .syntax--comment.syntax--line.syntax--percentage,
    .syntax--comment.syntax--line.syntax--double-percentage {
        color: #228B22; // green
        font-style: normal;

        .syntax--punctuation.syntax--definition.syntax--comment {
          color: #228B22; // green
          font-style: normal;
        }

        .syntax--storage.syntax--type.syntax--class.syntax--note {
          color: #228B22; // green
          font-style: normal;
        }

        .syntax--storage.syntax--type.syntax--class.syntax--todo {
          color: #228B22; // green
          font-style: normal;
        }

        .syntax--meta.syntax--cell {
          color: #228B22; // green ... not working
          font-style: normal;
        }

        .syntax--markup.syntax--underline.syntax--link {
          color: #228B22; // green
        }
    }

    // Parentheses
    .syntax--meta.syntax--parens {
      color: #000000;
    }

    // function
    .syntax--meta.syntax--function.syntax--matlab {
      .syntax--meta.syntax--arguments.syntax--function.syntax--matlab,
      .syntax--entity.syntax--name.syntax--function.syntax--matlab,
      .syntax--variable.syntax--parameter.syntax--output.syntax--function.syntax--matlab {
        color: #000000; //black
        .syntax--variable.syntax--parameter.syntax--input.syntax--matlab {
          color: #000000; //black
        }
      }
    }

    .syntax--meta.syntax--function.syntax--without-arguments.syntax--octave {
      .syntax--entity.syntax--name.syntax--function.syntax--octave {
        color: #000000; //black
      }
    }

    .syntax--support.syntax--function.syntax--octave {
      color: #000000; //black
    }


    // classdef
    .syntax--meta.syntax--class.syntax--matlab {
      .syntax--storage.syntax--type.syntax--function.syntax--matlab {
        color: #0000FF; //blue
      }

      .syntax--entity.syntax--name.syntax--section.syntax--class.syntax--matlab,
      .syntax--meta.syntax--function.syntax--matlab,
      .syntax--meta.syntax--methods.syntax--matlab {
        color: #000000; //black
      }

    }
  }
}