スタイル変更

環境設定 > レンダリング

各スタイルはCSSファイルになっており、[表示] ボタンを押すと格納ディレクトリが表示されます。自分だけのカスタムスタイルにしたい場合は、CSSファイルを用意してこのディレクトリに入れることで CSSプルダウンにファイル名（拡張子なし）が表示されるようになります。（再度設定画面を開き直す必要あり）プルダウンから選択し [リロード] ボタンを押すことで反映されます。

HTMLコードの確認方法

MacDownには作ったファイルをHTMLやPDFでエクスポートする機能があり、プレビュースタイルを作る上でHTMLでエクスポートしてコード確認をしていました。が！そんな必要はありませんでした。。。

GitHub にある help.md に↓こんな記述が。

Hidden preference
You can see the HTML behind a preview by enabling the OS X built-in WebKit developer tools for MacDown in a terminal window:
bash
defaults write com.uranusjr.macdown WebKitDeveloperExtras -bool true
Then select “Inspect Element” in the right-click context menu inside the preview pane.

This is the exact same inspector you find in Safari if you turn on the developer tools.

要は「Safari で使える Webインスペクタ が使えるよ！」って書いてありました。もっと早く知ってれば。。。orz

上記を１回 Terminal で叩けば、 MacDown のプレビュー画面で右クリックすると「要素の詳細を表示」というメニューが表示されるようになります。これをクリックすると Webインスペクタが表示されます。

Webインスペクタ上でスタイル試しながらCSSを作っていけます。楽チンです。