19
18

More than 5 years have passed since last update.

Atomのスペースをはっきり見えるようにする

Last updated at Posted at 2015-06-01

Settingsにある Show Invisibles にチェックを入れるだけで、半角スペースや改行が見えるようになるんですが、テーマによってはまだ薄かったりします。
なのでAtomのCSSをいじってちょっと濃くしてみたいと思います。

SettingsのThemesから your style sheet のリンクをクリックすると、styles.lessが開かれます。
そのstyles.lessの一番後ろにでもこんな感じで記述します。

styles.less
〜略〜

@invisible-color: rgba(197, 200, 198, 0.4);

atom-text-editor::shadow {

  .indent-guide {
    color: @invisible-color;
  }

  .invisible-character {
    color: @invisible-color;
  }

}

そうすると

が、こうなります。

ちなみにAtomのエディタのスタイルはShadow DOMで書かれているので、atom-text-editorに::shadow擬似要素をつけていないと変更されないのでご注意を。

あと、文字と文字の間の半角スペースはこれでは見えるようになりませんでした。残念。。。

参考リンク

19
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
18