概要

markdownを書くエディタとしてkobitoを使っていたけど、キーバインドが弱いのと、やたらエラーが多いのでやっぱりemacsで書くことにする。

要件

Emacs上でリアルタイムプレビューができること
出力されるプレビューは、githubのようなスタイルとする

自環境

Windows 10
GitBashをCmderで使用（GitBashの中身はmingw）
Emacs 25

pandoc

markdown-modeでは、プレビュー機能のためにmarkdown文書をhtml化するツールが必要。
インストールが楽なのでpandocを利用するものとする。

インストール

pandocのwindows用インストーラーは https://github.com/jgm/pandoc/releases/latest からダウンロードできる。
デフォルトで
c:/Users/<user>/AppData/Local/Pandocにインストールされるので、お好みでこのディレクトリにPATHを通しておく。

スタイルファイルの設定

生成するhtmlはgithubっぽいスタイルにしたいので、githubのcssを利用するよう設定しておく。

~/.pandocディレクトリを作成する。
github.cssをダウンロードして~/.pandocに置く。
別に背景画像はいらないので、github.cssでweb上の画像を参照している箇所をコメントアウトする。

このスタイルを指定してmarkdownをhtmlに変換するコマンドは以下の通り。

$ pandoc -s --self-contained -t html5 -c ~/.pandoc/github.css <md> -o <html>

--self-containedを指定することで、CSS、スクリプトファイル、画像がhtmlファイル中にdata:URIスキームで埋め込まれる。

markdown-mode

emacsにmarkdown-modeをインストールする。

M-x package-install markdown-mode

emacsでmarkdownを変換できるようにする

init.elに以下の記述を追加し、markdown-modeからコマンド一発でhtmlファイルを作成できるようにする。

;; markdownのコマンドのパス追加
(setq markdown-command "C:/Users/<user>/AppData/Local/Pandoc/pandoc -s --self-contained -t html5 -c C:/Users/<user>/.pandoc/github.css")

これで、markdown-modeのときにコマンド一発でhtmlファイルを作成できる。
以下のコマンドはよく使用するもの。

キーバインド	アクション
`C-c C-c e`	htmlファイルを作成する
`C-c C-c l`	htmlを作成した上でリアルタイムプレビュー画面を表示する
`C-c C-c p`	一時的にhtmlファイルを作成してブラウザで開く
`C-c C-c v`	htmlファイルを作成してブラウザで開く

作成されるhtmlファイル名は<mdファイルのbasename>.htmlになる。

リアルタイムプレビューが表示される*eww*バッファは、mdファイルを保存したときに自動で更新される。

ちなみにこのmarkdown-modeは、
<tab>で見出しの開閉、
C-c C-uでひとつ上の階層に移動、
C-c C-pでひとつ前の見出しへ移動、
C-c C-nでひとつ次の見出しへ移動、
などorg-modeに近い操作性で、慣れている人にとっては使いやすい。

トラブルシューティング

エンコーディングによるエラー

Emacsからmarkdownをコンパイルした際、以下のようなエラーが表示される場合。

pandoc.exe: Cannot decode byte '\x83': Data.Text.Internal.Encoding.Fusion.streamUtf8: Invalid UTF-8 s tream

多分Emacsのデフォルトエンコーディングがpandocに互換性のあるUtf-8ではない設定になっている。
init.elにデフォルトエンコーディングを設定してあげるとよい。
自分の環境だと以下のように設定している。

init.el

;; Default encoding
(set-default-coding-systems 'utf-8)
(set-buffer-file-coding-system 'utf-8)
(set-terminal-coding-system 'utf-8)
(set-keyboard-coding-system 'utf-8)
(prefer-coding-system 'utf-8)

フォントの設定

markdown-modeの標準設定だと、自環境では整形済みテキストのフォントが目も当てられない見た目だった。
fixedなんかだととても見づらいので、customize-faceで以下の変数のフォント設定を変更しておく。

markdown-pre-face
markdown-code-face

Emacsバッファで以下のコマンドでcustomize-faceを起動し、fixedなどのフォントが指定されていたらDELし、INSでdefault（またはお好み）のフォントを使うように設定する。

M-x customize-face markdown-pre-face

設定ができたら、Apply and Saveボタンを押下する。
Saveした時点で、init.elに自動で以下のような記述が追記されるので、
お好みでバイトコンパイルしておく。