3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-07-12

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

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

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

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

スタイル変更

環境設定 > レンダリング

環境設定.png

各スタイルは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

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

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

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?