LoginSignup
8

More than 3 years have passed since last update.

emacs で markdown のプレビューを

Last updated at Posted at 2020-09-02

これは何?

これまで、markdown の編集には impatient-mode を使ってきました。ブラウザ上でリアルタイムにプレビューしてくれるのはたいへん心地良いものです。

先日ふと、「もしかして、ブラウザとして xwidget-webkit が使えるんじゃね?」と思いつき、markdown の編集に特化するよう impatient-mode を改変してみました。

その結果、markdown の編集とプレビューは emacs で完結でき、統一したキー操作で書き物ができるようになり(特に C-l が気に入ってます)、自分としては満足しています。

特徴

  • emacs でのキー操作に連動して、firefox などのブラウザでリアルタイムにプレビューします。

  • M-< で文書の先頭へ、 M-> で文書の最後へポインタが移動しますが、ブラウザも追従(自動でスクロール)します。

  • C-l でポインタ位置が画面中央にくるよう再描画しますが、ブラウザも追従(自動でスクロール)します(完全ではありません)。

  • xwidget-webkit が有効な emacs であれば、emacs で完結できます。これは、ブラウザへ切り替えるキー操作、ブラウザを操作するキー操作を省略でき、emacs での書き物に集中できます。

  • Emacs Lisp と Javascript (と HTML とCSS )だけで構成しています。外部コマンドを一切使っていませんので、Microsoft Windows の上でも問題なく動きます。

  • 外部サービスも使っていませんので、オフラインでも問題なく動きます。

インストール

オリジナルの impatient-mode は、markdown 文書をプレビューできるようにするには少しばかり設定する必要がありました(もちろん、作者さんとメンテナさんには感謝です!)。

私の版は、markdown の編集に特化するよう改変したため、他のプロダクト(marked.js など)を同じフォルダに置くだけで動きます(同梱してもいいのかな)。

$ ll
Makefile
NEWS.md
README.md
github-markdown.css   # marked.min.js 用の css
github.css            # highlight.pack.js 用の css
highlight.pack.js     # コードの色付け
impatient-mode.el
impatient-mode.js
index.css
index.html
marked.min.js         # markdown から html への変換
mermaid.min.js        # mermaid 書式から svg への変換
mermaid.min.js.map    # mermaid 用
simple-httpd.el       # Emacs Lisp による http サーバ

もちろん init.el(require 'impatient-mode) は必要です。

入手先

github から取得してください。

こうして公表することで、日常的に emacs で markdown 形式でドキュメントを編集しているプログラマの皆さんに(ほんの少しでも)喜んでいただければと思いましたので、こうして投稿させていただきました。

それでは、以下の url からどうぞ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8