让Emacs显示Markdown中的图片

用Octopress或者直接用Jekyll都会涉及到Markdown。我们在写Markdown的时候，会遇到插入截图或者本地图片的问题。如果我们自己手工写上图片的标记，会非常的麻烦，于是我在前文在Emacs中插入截图或者本地图片中讲述如何自动化插入图片，来解决插入的问题。

今天我们来看一下如何在Emacs中预览Markdown中的图片。

虽然我们已经解决了插入图片不便，但我们有时看到这一串一串的文本图片标记或许有些许蛋疼，于是想预览一下图片，此时又是Emacs展示其强大的时候了。

Emacs中有iimage-mode可以方便地让我们显示图片，是Emacs自带的。当然如果想在buffer中插入图片我们甚至可以直接调用insert-image ^[1]往buffer中插入图片。我想Vim里面如果要显示图片一定相当相当蛋疼吧，哈哈。Emacs用户真幸福。

实现

好，又到了动手的时候了，让我们卷起袖子准备开工！

iimage settingsmy-iimage-settings.el

;; {% raw %}
(require 'iimage)

(add-hook 'info-mode-hook 'iimage-mode)
(add-hook 'markdown-mode-hook '(lambda()
				 (define-key markdown-mode-map
				   (kbd "<f12>") 'turn-on-iimage-mode)))

(setq iimage-mode-image-search-path '(list "." ".."))

;; for octopress
(add-to-list 'iimage-mode-image-regex-alist ; match: {% img xxx %}
	     (cons (concat "{% img /?\\("
			   iimage-mode-image-filename-regex
			   "\\) %}") 1))
(add-to-list 'iimage-mode-image-regex-alist ; match: ![xxx](/xxx)
	     (cons (concat "!\\[.*?\\](/\\("
			   iimage-mode-image-filename-regex
			   "\\))") 1))
;; 兼容以前在wordpress添加的图片
(add-to-list 'iimage-mode-image-regex-alist ; match: ![xxx](http://everet.org/xxx)
	     (cons (concat "!\\[.*?\\](http://everet.org/\\(wp-content/"
			   iimage-mode-image-filename-regex
			   "\\))") 1))
;; {% endraw %}

我们首先设置一下图片搜索路径iimage-mode-image-search-path，可以根据实际需要进行设置。对于Octopress的目录结构，我将其设置为当前以及上一级目录(list "." "..")。

然后，我们来设置图片的正则表达式，iimage会将文本中满足的正则表达式提取出来替换成图片。对于插入到iimage-mode-image-regex-alist中的正则表达式，为一个点对(REGEXP . NUM)。为什么是这样呢？因为正则表达式中可能会有很多级的括号，通过NUM我们可以指定取哪一个group的内容为图片路径，像NUM为0的时候取得是整个表达式的值，这个有疑问的话可以问一下Google大神。

最后，我们设置在markdown-mode中F12为开关图片显示。

效果

详细配置可以看my-iimage-settings.el。

Showing Images ↩︎