如何在 Emacs 中实时预览 markdown？答案

【问题标题】：How can I preview markdown in Emacs in real time?如何在 Emacs 中实时预览 markdown？
【发布时间】：2016-03-23 16:03:24
【问题描述】：

我正在使用 spacemacs，我正在寻找一个插件来实时预览 Markdown。我找到了一个插件markdown-preview-eww，但它需要一个 gem，我不想安装 ruby。

markdown-mode只是将md导出为html，无法实时预览markdown。另外，我不喜欢在未经我同意的情况下生成任何文件。

那么，有没有插件可以在 emacs 中预览 markdown？还是每个人都在 emacs 中使用 org-mode 而不是 markdown？

【问题讨论】：

这不是编程问题；它更有可能成为Emacs 网站上的主题。
我投票决定将此问题作为离题结束，因为这是一个一般性的 Emacs 问题，而不是关于编写或编译程序。
向下滚动一下，看看2020年的最佳答案。我测试过livedown-mode、flymd和impatient mode，恕我直言，效果更好的是grip-mode。唯一的缺点是它有 python/pip 依赖。

标签： emacs markdown

【解决方案1】：

这里列出了一些解决方案：http://wikemacs.org/wiki/Markdown#Live_preview_as_you_type。

纯 Emacs（几乎）的解决方案和简单的解决方案，不需要 Python 或 Nodejs 的额外库，是不耐烦模式。

不耐烦模式

它被设计为与 html 一起使用，但文档提供了一个技巧以使其与 markdown 一起使用。它也像一个魅力，但需要一个配置步骤：

使用 M-x package-install RET impatient-mode RET 安装不耐烦模式，前提是您已将 package.el 配置为使用 melpa 存储库。
使用 M-x httpd-start 启动 emacs 的 Web 服务器。
在您有兴趣实时预览的缓冲区中启动不耐烦模式：M-x impatient-mode。
打开浏览器到 localhost:8080/imp。您将看到启用该模式的缓冲区列表。单击一个：您会看到缓冲区的实时渲染。

要启用 markdown 转换，我们遵循 wikemacs：

在某个地方定义这个 elisp 函数，比如在你的 init 文件中：

(defun markdown-html (buffer)
  (princ (with-current-buffer buffer
    (format "<!DOCTYPE html><html><title>Impatient Markdown</title><xmp theme=\"united\" style=\"display:none;\"> %s  </xmp><script src=\"http://strapdownjs.com/v/0.2/strapdown.js\"></script></html>" (buffer-substring-no-properties (point-min) (point-max))))
  (current-buffer)))

告诉不耐烦模式使用它：M-x imp-set-user-filter RET markdown-html RET。
回到您的浏览器，它可以工作了！

Flymd（不适用于 FF>=68）

编辑：感谢 cmets，flymd-fyit 在 Firefox 68 及更高版本中不起作用。

使用 package.el (M-x package-install RET flymd RET) 安装它，然后只需调用 M-x flymd-flyit。它打开带有渲染标记的浏览器。

我们可以启用/禁用自动重新加载和 github markdown 风格。

编辑：较新的解决方案，需要外部包。

livedown 模式（使用 npm）

https://github.com/shime/emacs-livedown 需要 livedown npm 包。另外，这个 emacs 包不在 MELPA 中，你必须在本地克隆它。否则，这是一个很好的轻量级解决方案。

Vmd 模式（npm，电子）

另一个解决方案是vmd-mode，它与vmd 节点包一起使用。这不是最重量级的解决方案：vmd 基于 Electron (!)。

Grip-mode（Python，Github 的速率限制）

另一个是grip-mode，它依赖于一个 Python 包：

pip install --user grip

M-x package-install grip-mode

然后在降价缓冲区中运行M-x grip-mode。它会在您的浏览器中打开一个新标签页。

不幸的是，在撰写本文时，它受到 Github 的速率限制。事实上，为了像 Github 一样精确地呈现内容，它调用了它的 API。它不会在本地呈现内容。因此，我们限制为每小时 60 个电话，这很少。看到这个问题：https://github.com/joeyespo/grip/issues/35

【讨论】：

同一作者，您可能需要检查 skewer-mode github.com/skeeto/skewer-mode，它提供了在 Web 浏览器中与 JavaScript、CSS 和 HTML 的实时交互！
impatient-mode 为我工作得很好！谢谢@Ehvince。
flymd 自 68 年起无法在 Firefox 上运行，请参阅 github.com/mola-T/flymd/issues/27
我稍微修改了代码，将我的 org-mode 代码导出为 markdown，然后显示：defun markdown-html (buffer) (with-current-buffer buffer (org-md-export-as-markdown)) (princ (with-current-buffer "*Org MD Export*" ...。只要org-export-show-temporary-export-buffer 是nil，效果就很好

【解决方案2】：

我喜欢this 更简单的方法，不需要其他包或浏览器：

在当前缓冲区执行M-x markdown-other-window，并在其他窗口显示结果。
更改为M-x html-mode并隐藏HTML标签M-x sgml-tags-invisible。

然后更新 html 缓冲区再次运行 markdown-other-window C-c C-c m 在降价缓冲区上。

【讨论】：

C-c C-c p 现在可以做同样的事情了
但需要pandoc。我只是将其添加为另一个问题的注释。
如果安装后查找markdown命令仍然报错，见stackoverflow.com/a/19740648/1949430
当我尝试通过运行 markdown-other-window 更新 html 缓冲区时，我不断收到消息 Text is read-only。有什么想法吗？

【解决方案3】：

您现在可以在 Spacemacs 中使用 markdown-live-preview-mode 或 SPC m c p 执行此操作。

【讨论】：

您也可以在常规 Emacs 中执行此操作（至少在 GNU Emacs 26.1 中）...确保在 Mac 上使用 brew install markdown
我发现markdown-live-preview-mode 等价于SPC m c P 而不是SPC m c p。仍然感谢分享提示。
在 spacemacs 中，按下SPC m c p 后，我在底部Markdown command markdown is not found 得到错误。知道为什么吗？
这是一个将markdown转换为html的shell程序。该软件包取决于该工具。只需使用 apt、pacman、dnf 或任何你的包管理器来安装它

【解决方案4】：

我想推荐grip-mode：即时 Github 风格的 Markdown/Org 预览。

【讨论】：

2019 年 12 月感谢您，这是最好的答案。
非常好，除了 Github API 请求限制。

【解决方案5】：

在执行this answer 中的步骤之前，您需要在系统上安装一个markdown 解析器和在emacs 中将其关联到一个主要模式。

将 emacs 包仓库添加到 init.el

(require 'package)
(add-to-list 'package-archives
             '("melpa-stable" . "https://stable.melpa.org/packages/"))
(package-initialize)

重启emacs并刷新包：

M-x package-refresh-contents

通过评估安装emacs主模式markdown-mode：

M-x package-install RET markdown-mode RET

安装降价处理器：

brew install pandoc
OR
sudo apt-get install pandoc

将markdown解析器映射到~/.emacs.d/init.ellike中的major-mode：

(custom-set-variables
  '(markdown-command "/usr/local/bin/pandoc"))

【讨论】：

这是最直接的答案以及引用的答案，并且有效！我在迷你缓冲区中得到了Markdown command markdown error，但不知道为什么

【解决方案6】：

你可以使用我的emacs应用框架：https://github.com/manateelazycat/emacs-application-framework

它是在你的emacs中嵌入浏览器，然后你可以在左边写markdown，在右边预览更新。

截图于：https://github.com/manateelazycat/emacs-application-framework/blob/master/screenshot/markdown_previewer.gif

如何安装eaf请看https://github.com/manateelazycat/emacs-application-framework/blob/master/README.md

【讨论】：

@Samuel 请不要删除我的帖子，它包含最佳解决方案，而不仅仅是一个链接

【解决方案7】：

@Ehvince 的回答启发我稍微更改了 markdown-html 函数，以提供与 Github.com 中完全相同的视图。

(defun markdown-html (buffer)
  (princ (with-current-buffer buffer
           (format "<!DOCTYPE html><html><script src=\"https://cdnjs.cloudflare.com/ajax/libs/he/1.1.1/he.js\"></script><link rel=\"stylesheet\" href=\"https://assets-cdn.github.com/assets/github-e6bb18b320358b77abe040d2eb46b547.css\"><link rel=\"stylesheet\" href=\"https://assets-cdn.github.com/assets/frameworks-95aff0b550d3fe338b645a4deebdcb1b.css\"><title>Impatient Markdown</title><div id=\"markdown-content\" style=\"display:none\">%s</div><div class=\"markdown-body\" style=\"max-width:968px;margin:0 auto;\"></div><script>fetch('https://api.github.com/markdown', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ \"text\": document.getElementById('markdown-content').innerHTML, \"mode\": \"gfm\", \"context\": \"knit-pk/homepage-nuxtjs\"}) }).then(response => response.text()).then(response => {document.querySelector('.markdown-body').innerHTML = he.decode(response)}).then(() => { fetch(\"https://gist.githubusercontent.com/FieryCod/b6938b29531b6ec72de25c76fa978b2c/raw/\").then(response => response.text()).then(eval)});</script></html>"
                   (buffer-substring-no-properties (point-min) (point-max))))
         (current-buffer)))

启用不耐烦模式并自动将imp-user-filter设置为markdown-html的功能。

(defun markdown-preview-like-god ()
  (interactive)
  (impatient-mode 1)
  (setq imp-user-filter #'markdown-html)
  (cl-incf imp-last-state)
  (imp--notify-clients))

使用方法：

M-x http-start
在.md 缓冲区M-x markdown-preview-like-god
转到localhost:8080/imp

【讨论】：