Atomは、「A hackable text editor for the 21st Century」というキャッチコピーが付いているように、自分好みに柔軟にカスタマイズできるところが魅力のエディタです。この記事ではAtomの選択範囲の背景色を変更する方法について、紹介します。
簡単に言うと、設定ファイルであるstyles.lessにLessの書式で記述を追加すれば、自分の好きなスタイルに変更できます。
備考
Atom Ver.1.13からShadow DOMが廃止されました。本記事の方法は、Ver.1.13以降に対応しています。
1. styles.lessを開く
まずは自分のstyles.lessを開きます。
styles.lessを開く方法には、メニューから開く方法とCommand Palette(コマンド・パレット)を使う方法があります。
1.1. メニューから開く方法
使用環境によって、若干メニュー名に違いがありますが、基本的には同じです[1]。
1.1.1. Macの場合
Atomメニュー > Stylesheetを選択。
1.1.2. Windowsの場合
Fileメニュー > Stylesheetを選択。
1.1.3. Linuxの場合
Editメニュー > Stylesheetを選択。
1.2. Command Paletteを使う方法
使用環境によって、ショートカットキーが違いますが、基本的には同じです[2]。
1.2.1. Macの場合
- Cmd+Shift+Pを押して、 stylesheet と入力。
- Appication: Open Your Stylesheetを選択。
1.2.2. WindowsやLinuxの場合
- Ctrl+Shift+Pを押して、 stylesheet と入力。
- Application: Open Your Stylesheetを選択。
2. styles.lessに記述を追加する
開いたstyles.lessに、下記の記述を追加します。
@selection-color: blue;
atom-text-editor {
.highlights {
.highlight.selection .region {
background-color: @selection-color;
}
}
}
1行目の「blue」を自分の好きな色に変更して保存すると、すぐに結果が反映されます。
