AtomのMarkdownプレビューのフォントを変える方法

Atomで便利なプレビューパッケージ

Atomはパッケージでカスタム可能な便利なエディタです。

様々なパッケージが使えますが、Markdown-PreviewMarkdown-Preview-Plus
人気です。Markdown入力をする際にMarkdown表示がどうなるのか確認しながら
入力ができるのでメモやコーディングの助けになります。

Atom見栄えの変え方

フォントが変えられない

Atomではエディタ部分の設定変更ができるのですが、Markdown-Preview部分はフォントの変更がされません。

フォントだけじゃなくてちょっと見づらい?

上の画像はサンプルですが、H1/H2のスペースが広すぎる、画像の枠が見づらいなど個人的には見づらいと思っています。

AtomはCSSで編集可能

対処方法ですがAtomはCSSで表示を帰ることができ、Markdown Previewの部分に対しても有効です。Mac/Windowsどちらでも機能します。

Atom CSSの編集方法

CSSファイルの開き方

設定を開きます(Ctrl/Cmd + , )。メニューからテーマを選ぶと一番上にCSSが選べます。Your stylesheetの部分です。

CSSの編集

Styles.lessを編集します。とりあえずフォントやらテキストやらは適当に編集すればOKです。たとえばこんな感じ。

h1,h2 {
font-family: meiryo !important;
margin-top: 0.3em;
}
img { border: 5px orange solid; }

Markdown-preview-plusの場合はクラスセレクタは
.update-previewのようです。
Markdown-Previewの場合は.markdown-preview

.update-preview h1,update-preview h2{
font-family: meiro !important;
}

などとすればOKです。

ファイルを保存すると即座にCSSが有効化されます。

編集する際のセレクタ名など調べたい

基本的には標準的なHTMLでPreviewは組まれているので調べる必要ないかもしれませんが、「開発者ツール」が使えるのでこれを見ながらやるとより設計がしやすいと思います。

markdown-Preview-plusの適当なところを右クリックしてOpen Dev Toolsを選べば、Chrome/Firefoxなどで見られるような開発者ツールに飛べるのでここで調べましょう。

残念ながらMarkdown-Previewの場合は自力では調べる方法は提供されてなさそうです。

Pocket

Leave a Reply

メールアドレスが公開されることはありません。