如何在 Emacs 中实时预览 markdown？

Question

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

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

请问emacs有没有预览markdown的插件？还是每个人都在 emacs 中使用 org-mode 而不是 markdown？

Answer 1

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

纯 Emacs（几乎）解决方案和简单的解决方案，不需要来自 Python 或 Nodejs 的额外库，是 impatient-mode。

急躁模式

它旨在与 html 一起使用，但文档提供了使其与 markdown 一起使用的技巧。它也很有魅力，但需要一个配置步骤：

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

启用markdown转换，我们关注wikemacs：

在某处定义此 elisp 函数，例如在您的初始化文件中：

 <!-- language: lang-lisp -->

  (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.
返回浏览器，成功了！

livedown 模式（使用 npm）

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

Vmd 模式（npm，电子）

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

抓握模式（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

Answer 2

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

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

然后再次更新html缓冲区运行markdown-other-windowC-cC-cm 在降价缓冲区上。

Answer 3

你可以使用我的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

Answer 4

@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

Answer 5

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

Answer 6

我想推荐grip-mode：即食Github-风味Markdown/Org预览。

Answer 7

在执行中的步骤之前，您需要在系统上安装 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 主要模式降价模式：

M-x package-install RET markdown-mode RET

安装降价处理器：

brew install pandoc
OR
sudo apt-get install pandoc

将 markdown 解析器映射到 ~/.emacs.d/init.el 中的主要模式，例如：

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

如何在 Emacs 中实时预览 markdown？

How can I preview markdown in Emacs in real time?

emacs

markdown

急躁模式

livedown 模式（使用 npm）

Vmd 模式（npm，电子）

抓握模式（Python，Github的速率限制）