ATOM

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

More than 3 years have passed since last update.

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擬似要素をつけていないと変更されないのでご注意を。

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


参考リンク

http://blog.atom.io/2015/01/05/enable-shadow-dom.html