ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

emacsでmarkdownファイルをメンテする環境を整える

2020年 08月 31日

目次

本記事ではemacsでmarkdownを書いたり見たりするトピックを紹介します。

トピックは下記です。

  • markdown-modeでmarkdown構文をemacsで扱う
  • markdownのhtmlプレビューできるようにする
  • それをリアルタイムプレビューできるように進化させる

編集中はmarkdownモードにする

まずはmarkdownモードを導入します。

“markdown-mode”をパッケージインストールして、拡張子に応じたモードをセットします。

;; (package-install 'markdown-mode)
(add-to-list 'auto-mode-alist '("\\.md\\'" . gfm-mode))

markdown編集中のバッファにmarkdown-modeが適用されると以下のようなスタイルになります。

markdown-mode

スタイルだけでなく、いろいろキーバインドされます。 キーバインドは「C-c C-h」で一覧できます。

プレビューできるようにする

まずはmarkdownをhtmlに変換する環境を整える。

markdownファイルをhtmlに変換するコマンドが必要で、macならmultimarkdownをインストールすればよいです。 markdownというそのままのコマンドもあるようだけど、高機能っぽいmultimarkdownにしました。

$ brew install multimarkdown

markdown-modeの変換コマンドは”markdown”になっているので、“multimarkdown”に変更します。

(setq markdown-command "multimarkdown")

これで、

  • C-c C-c p : htmlを出力してブラウザ表示
  • C-c C-c m : バッファにHTML出力

できるようになりました。

リアルタイムプレビューできるようにする

ここまでで、markdownをhtmlに変換してブラウザで確認きるようになりました。

この程度だと、markdownを編集するたびに「C-c C-c p」しないといけなくなります。 そこで、リアルタイムプレビューできるようにしていきます。

markdown-preview-modeを使います。

(package-install 'markdown-preview-mode)

プレビューするには、「M-x markdown-preview-mode」します。 表示すると、、、結構奇抜な配色ですね。

プレビューモード

スタイルを変更します。 ましなスタイルがmarkdown-preview-modeにあったので、それを使います。

(setq markdown-preview-stylesheets (list "http://thomasf.github.io/solarized-css/solarized-light.min.css"))

CSSを変えたら、こんな感じになりました。

solarized-light

リアルタイムプレビューはいらなかったかも

私はGatsby.jsでmarkdownからサイトを作っており、そちらでリアルタイムプレビューできるので、 markdown-preview-modeは使わないことにしました。

以上です。

広告