Emacs に markdown-mode を入れる

目的

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

用語

パッケージ/プログラム

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

markdown-mode内変数

環境

• OS
  macOS Mojave (10.14.3)
• Emacs
  GNU Emacs 26.1

導入手順概要

1. markdown パーサの導入
   github-markupと、github-markupの内部で呼び出されるcommonmakerをインストールする。
   gemを利用する。

2. markdown-modeのインストール
   markdown-modeをインストールする（gfm-modeもインストールされる）。
   package.elとMELPAリポジトリ（melpa-stable）を利用する。

3. init.elの編集
   markdown-mode内変数を適切に設定する。
   markdown-css-pathsにはGithubのCSSファイルを設定する。
   markdown-xhtml-header-contentには、bodyタグに対するCSSと、bodyタグにclassを追加するjavascriptを設定する。（GithubのCSSファイルの記述はbodyタグに"markdown-body"classが付与されていることを想定しているのため）

導入手順

1. markdown パーサの導入

   sudo gem install github-markup commonmarker
   

2. markdown-modeのインストール
   M-x package-install RET markdown-mode RET

3. 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ファイルのパス（ここでいいのか）