AtomでカッコよくMarkdown PreviewするためのCSS

Apr 22, 2015   #atom  #markdown  #less  #css 

みなさん、Atom使ってますか?

私はブログをMarkdown記法で書いています。 Atomでは標準でMarkdownのプレビューができるのですが、フォントが中華風味になっていたり余白がイケてなかったりと気になるポイントがあるので修正してみます。

私が使っているAtomのバージョンは0.192.0 (0.192.0)です。

ユーザスタイルシートを開く

AtomはChromium(Google Chromeの派生元)ベースで作られており、乱暴な言い方をするとエディタっぽいブラウザです。 なので、見た目の変更はスタイルシート(LESS)で行います。

Ctrl + ,で設定画面を開きます。 ThemesのChoose a Theme下にあるyour stylesheetをクリックしましょう。

表示されたstyles.lessをこれから編集します。 styles.lessはユーザが自由に定義できるスタイルシートです。

スタイルを適用する

styles.lessの内容を下記のコードに差し替えます。

変更しているポイントは下記の通りです。

  • Markdown Previewのフォントと余白関係を自分好みにする(趣味に応じて変えてください)
  • タブにホバーした時に変化がないため、ホバーした時に白くなるようにする
  • パネルを分割した際にアクティブと非アクティブがわかりづらいので、非アクティブパネルは半透明にする

2015/06/29追加:

  • 左のツリービュー、タブのタイトル、ステータスバーの中華フォントをヒラギノorメイリオ化する

自分でも色々カスタマイズしたい人向け

Ctrl+Alt+iでChromeと同じデベロッパーツールが表示されます。 カスタマイズしたい箇所のclass等を探して、styles.lessでオーバーライドしてしまいましょう。