目的

Emacsでmarkdownファイルの編集を快適に行う
Emacsで作成したmarkdownファイルをGithubの体裁でHTML表示する

用語

パッケージ/プログラム

markdown-mode/gfm-mode
Emacsのmarkdownファイルの編集モード用パッケージ。
markdownパーサ
markdown形式で書いたファイルを、HTMLファイルに変換するためのプログラム。markdown-mode/gfm-modeから呼び出される。
各プログラムによって、生成されるHTMLファイルに軽微な差異がある。

markdown-mode内変数

変数名	説明
markdown-command	markdownパーサの実行コマンドを設定する
markdown-command-needs-filename	markdownパーサのコマンドのファイル入力要否を設定する
markdown-content-type	HTMLファイルのmetaタグに記載されるContent-Typeを設定する
markdown-css-paths	HTMLファイル内で読み込むCSSファイルのパスを設定する
markdown-xhtml-header-content	HTMLファイルのヘッダ部に挿入する内容を設定する

環境

OS
macOS Mojave (10.14.3)
Emacs
GNU Emacs 26.1

導入手順概要

markdown パーサの導入
github-markupと、github-markupの内部で呼び出されるcommonmakerをインストールする。
gemを利用する。
markdown-modeのインストール
markdown-modeをインストールする（gfm-modeもインストールされる）。
package.elとMELPAリポジトリ（melpa-stable）を利用する。
init.elの編集
markdown-mode内変数を適切に設定する。
markdown-css-pathsにはGithubのCSSファイルを設定する。
markdown-xhtml-header-contentには、bodyタグに対するCSSと、bodyタグにclassを追加するjavascriptを設定する。（GithubのCSSファイルの記述はbodyタグに"markdown-body"classが付与されていることを想定しているのため）

導入手順

markdown パーサの導入

sudo gem install github-markup commonmarker

markdown-modeのインストール
M-x package-install RET markdown-mode RET
init.elの編集

;;++++++++++++++++++++++++;; 
;; markdown-mode settings ;;
;;++++++++++++++++++++++++;;
(use-package markdown-mode
 	     :commands (markdown-mode gfm-mode)
	     :mode (("\\.md\\'" . gfm-mode)
		    ("\\.markdown\\'" . gfm-mode))
	     :config
	     (setq
	      markdown-command "github-markup"
	      markdown-command-needs-filename t
	      markdown-content-type "application/xhtml+xml"
	      markdown-css-paths '("https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown.min.css")
	      markdown-xhtml-header-content "
<style>
body {
  box-sizing: border-box;
  max-width: 740px;
  width: 100%;
  margin: 40px auto;
  padding: 0 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
  document.body.classList.add('markdown-body');
});
</script>
" ))

参考URL

markdown-modeで“GitHub Flavored Markdown”を実現する

Future Work

シンタックスハイライト
Table入力時のキーバインド
CSSファイルのパス（ここでいいのか）