[ MacDown ] プレビューの見た目を変更する方法

2311 ワード
CSS Mac Markdown Inspector CSS テキストリンク

MacDown は Mac で Markdown を書く際に使えるオープンソースのエディタです。

MacDown
The open source Markdown editor for macOS.
Project site
GitHub

無料なうえに使いやすいので非常に重宝してます。ただ、使っていくとだんだんプレビューの見た目をいじりたくなってきました。

MacDownはプレビューのスタイルを設定画面から変更できる機能が備わっていて、自分でスタイルを作ることもできるようになっています。

スタイル変更

環境設定 > レンダリング

各スタイルは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を作っていけます。楽チンです。