Atom スタイルの設定

Atom エディタで独自のスタイルを設定する方法です。
基本ですが、自作パッケージで済ませていたので真っ当な方法のメモです。

とりあえず、以下の画像のような見た目にしたい。

変更したい箇所のcssクラスをDeveloper toolsで調べる。

html

<span class="syntax--markup syntax--heading syntax--heading-1 syntax--gfm">
  <span class="syntax--markup syntax--heading syntax--marker syntax--gfm">#</span>
  <span class="syntax--markup syntax--heading syntax--space syntax--gfm"> </span>
  見出し1
</span>

html

<span class="syntax--comment syntax--line syntax--double-slash syntax--cpp">
  <span class="syntax--punctuation syntax--definition syntax--comment syntax--cpp">//</span>
  コメント
</span>
<span class="syntax--comment syntax--block syntax--c">
  <span class="syntax--punctuation syntax--definition syntax--comment syntax--begin syntax--c">/*</span>
  ブロックコメント
  <span class="syntax--punctuation syntax--definition syntax--comment syntax--end syntax--c">*/</span>
</span>
<span class="syntax--string syntax--quoted syntax--double syntax--c">
  <span class="syntax--punctuation syntax--definition syntax--string syntax--begin syntax--c">"</span>
  文字列リテラル
  <span class="syntax--punctuation syntax--definition syntax--string syntax--end syntax--c">"</span>
</span>

スタイルシートを開いて(File -> Stylesheet...)、以下のように書き込む。

less

@import "ui-variables";

//atom-text-editorは、必須ではない
atom-text-editor {
  .syntax--gfm.syntax--heading-1 {
    background-color: hsla(0, 60%, 40%, 0.4);
  }

  .syntax--gfm.syntax--heading-2 {
    background-color: hsla(20, 60%, 40%, 0.4);
  }

  .syntax--gfm.syntax--heading-3 {
    background-color: hsla(40, 60%, 40%, 0.4);
  }

  .syntax--gfm.syntax--heading-4 {
    background-color: hsla(60, 60%, 40%, 0.4);
  }

  .syntax--gfm.syntax--heading-5 {
    background-color: hsla(80, 60%, 40%, 0.4);
  }

  .syntax--gfm.syntax--heading-6 {
    background-color: hsla(100, 60%, 40%, 0.4);
  }

  //これだけで良いと思うのだが、"//"などメタ文字自身の文字が変更されない
  .syntax--comment.syntax--line {
    background-color: hsla(120, 50%, 25%, 0.5);
    color: darken(@text-color, 10%);
    font-style: italic;
  }

  //コメントのメタ文字自身
  .syntax--comment.syntax--definition.syntax--punctuation {
    color: darken(@text-color, 10%);
    font-style: italic;
  }

  .syntax--comment.syntax--block {
    background-color: hsla(120, 50%, 25%, 0.5);
    color: darken(@text-color, 10%);
    font-style: italic;
  }

  .syntax--quoted {
    background-color: hsla(320, 30%, 50%, 0.2);
    font-style: italic;
  }
}