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

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 のスタイルも反映させました。