Edited at

Atomエディタのスタイルシート

More than 3 years have passed since last update.

Atomエディタの標準設定だと文字が中華フォントちっくなので、私の設定です。Mac用。


設定方法

メニュー:Atom > Preferences...を選ぶとSettingsタブがでます。

そこから Themes を選んで、Choose a Themeの下にある、

「You can also style Atom by editing your stylesheet

のyour stylesheetをクリックしてください。

style.lessというスタイルシートが開きます。

私はこのように書いてます。


style.less


/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed.
*
* If you are unfamiliar with LESS, you can read more about it here:
* http://www.lesscss.org
*/

.tree-view {

}

// style the background and foreground colors on the atom-text-editor-element
// itself
atom-text-editor {

}

// To style other content in the text editor's shadow DOM, use the ::shadow
// expression
atom-text-editor::shadow .cursor {

}

//ここから追加
@font-family-p: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN";
@font-family-m: Consolas, 'Courier New', Courier, Monaco, monospace;

.tree-view {
font-family: @font-family-p;
}
.tree-view ol {
font-size:18px;
padding:0;
}
.tree-view li {
padding:0.1em;
}

.editor {
font-family: @font-family-m;
}

.vertical {
font-family: @font-family-p;
}

.markdown-preview {
font-family: @font-family-p;

h1, h2, h3, h4, h5, h6 {
font-family: @font-family-p;
}

h1 {
padding:0.1em;
line-height:140%;
background-color:#eaeaea;
border:1px solid #3333aa;
}
h2 {
padding:0.0em;
line-height:130%;
text-indent: 0.1em;
border:1px solid #3333aa;
border-left:5px solid #3333aa;
}
h3 {
padding:0.0em;
line-height:120%;
text-indent: 0.2em;
border-bottom:1px solid #3333aa;
}
h4 {
padding:0.1em;
line-height:110%;
text-indent: 0.2em;
border-bottom:1px dashed #3333aa;
}

pre, code, tt {
font-family: @font-family-m;
}
}


追記:markdown-preview のスタイルも反映させました。