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

[English version is available here](http://qiita.com/kouichi-c-nakamura/items/0c0080308e651d8704ad)

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

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

[最近のヴァージョン(v1.13.0)（現在 1.18.0）でかなり`stylecs.less`の文法が変わった](http://blog.atom.io/2016/11/14/removing-shadow-dom-boundary-from-text-editor-elements.html)ようで、ネットで見つかるものも古い情報が多いようです。

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

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. これをそのまま馬鹿正直に色指定するには次のように書きます。  
 
  ```scss
   // 色指定
   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のコード
![Screenshot copy.png](https://qiita-image-store.s3.amazonaws.com/0/109898/eece6bf5-d53b-0f77-d885-d61d576958ca.png)


### こちらはMATLAB本来のカラー設定
<img width="646" alt="Screenshot2.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/63289a2f-2cb4-6444-70ca-e9321e346a14.png">



## CSS

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

```scss
// 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
      }

    }
  }
}
```