先日Qiitaで初めて記事を書いた時, markdownのリアルタイムプレビュー機能に感動した.
私はmarkdownを使うことがあまりなかったので, リアルタイムにプレビューできるのはとても助かった.
そこでふと, 「自分のローカル環境でmarkdown書く時にもこの機能あるとめちゃ便利やんけ」と思ったので, やってみたという記事になります.
なお, 私はEmacsを利用してるので, Emacs以外のエディタを使ってる人は申し訳ないですがブラウザバックしてください.
環境
macOS Sierra 10.12.6
GNU Emacs 24.5.1
markdown-preview-mode
Emacsでmarkdownのプレビューができるパッケージがないものか探していたら, markdown-preview-modeなるパッケージを見つけた.
markdown-preview-mode (githubへのリンク)
物は試しということでとりあえずインストール(Emacsのパッケージ管理ツールを利用).
なお, 上のリンク先にも書いてあるが, markdown-preview-modeの利用には, 以下のパッケージも必要なので, 一緒にインストールしておくと良い.
- websocket.el
- web-server.el
- uuidgen
インストール後, ,以下のコードをinit.elに記述.
(autoload 'markdown-preview-mode "markdown-preview-mode.el" t)
これで終わり. 後はEmacsでmarkdownファイルを開き, M-x markdown-preview-modeを実行すると. ブラウザが立ち上がり書いたmarkdownを見ることができる.
デフォルトだと黒背景にショッキングピンクや蛍光色やらを使ったcssが読み込まれており, 非常に見難い.
なので, cssを変えたい場合は以下のようなコードを設定ファイルに書き込めば良い.
(個人的にはgithubのあの見た目が好きなので, githubのcssを使用)
(setq markdown-preview-stylesheets (list "github.css"))
まとめ
これでローカルの環境でも, markdownをリアルタイムにプレビューしながら編集できるようになった(嬉しい!).
しかし, これはどのようにやっているのだろうか.
私はEmacs Lispさっぱりなので, コードが読めないのだが, 必要なパッケージにweb-serverやらwebsocketやらがあるあたり, ローカルにwebサーバを立てて, そこにブラウザでアクセスしてるのだろうか・・・
後, いちいちM-x markdown-preview-modeのコマンドを打つのがめんどくさい.
(似たような名前のパッケージがあるから←, 補完でも微妙)
コマンド名をエイリアスかなんかで変えられるといいのだが, いかんせん調べても方法が見つからなかった・・・
誰か詳しい方がいらっしゃれば, ご教示ください!