目次

Emacsでマークダウンを記述する

Emacsでマークダウンを記述及びプレビューする方法はいくつかあります。
一人で開発するだけなのでEmacsの画面でプレビューすれば良いものもあれば、
Githubにアップロードするために、
出来栄えをある程度確認しながら編集したい場合があります。

そこで以下では、上記2つのケースに応じて自身が利用しているコマンドを記述します。

Github等のWebサービスで公開・利用する場合

mdで記述可能なWebサービスを利用するケースでは、
実際に適用されるスタイルやWebブラウザでの出来栄えを見ながら編集したいはずです（少なくとも私は）。

この場合は、markdown-preview-mode をインストールしてプレビューすることで、
Github等で実際にユーザが見るのと近い状態で確認することができます。

emacs にて package-install でも package-list-pacakge でも良いので、
下記2パッケージをインストールします。

• markdown-mode
• markdown-preview-mode

その後、~/emacs.d/init.el に下記の内容を記述します。

まずは、markdown-mode の基本設定です。

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

こちらの設定は、公式ページの内容を参考にしています。

公式ページ

その後、markdown-preview-mode の設定になります。

;;; markdown preview mode
(setq markdown-preview-stylesheets 
      (list "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css"))

markdown preivew mode に関しては、
基本的に公開先のGithub等で利用されているCSSを用いると出来栄えをきちんと確認できるでしょう。

私は Githubで公開することが多いので、githubのCSSを利用しています。

詳しいことは 下記公式ページを参考にしてください。

公式ページ

利用方法

実際の利用方法は、.md でマークダウンなファイルをEmacsで開き、
M-x markdown-preview-mode を入力すると、Webブラウザにリアルタイムで変更が反映されます。

Emacs上で簡易的にプレビューする場合

お一人さまな開発や素早くプレビューが確認したい場合は、
Emacs内でプレビューするのが良いと思われます。

emacs にて package-install でも package-list-pacakge でも良いので、
下記2パッケージをインストールします。

• markdown-mode

その後、~/emacs.d/init.el に下記の内容を記述します。

まずは、markdown-mode の基本設定です。

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

こちらの設定は、公式ページの内容を参考にしています。

公式ページ

利用方法

実際の利用方法は、.md でマークダウンなファイルをEmacsで開き、
markdown-mode の markdown-live-preview-mode を利用することで、
Emacs上に *eww*バッファが開かれ、リアルタイムなプレビューが表示されます。

このショートカットは、 C-c C-c l に割り当てられているため、
基本的にはこちらを利用することが多いです（私は）。

オフレコ

ただ、これ。。。
C-c C-c l で新しい*eww*バッファが開かれてそこでプレビューが見れると思っていたんですが
（丁度2画面に分かれて上が編集バッファで、下がプレビューバッファみたいな）、
なぜか同じバッファが *eww* になってしまうんですよね・・・

困る。