如何实时预览Emacs中的降价?

时间:2016-03-23 16:03:24

标签: emacs markdown

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

markdown-mode只是将md导出为html,并且无法实时预览降价。另外,如果没有我的同意,我不想生成任何文件。

那么,是否有任何插件可以预览emacs中的markdown?或者每个人都在emacs中使用org-mode而不是markdown?

7 个答案:

答案 0 :(得分:33)

此处列出了一些解决方案:http://wikemacs.org/wiki/Markdown#Live_preview_as_you_type

其中两个需要额外的包:你提到的ruby或livedown-mode的npm(nodejs,javascript)库。

虽然有两个纯粹的Elisp选项!最简单的是flymd,另一个叫impatient-mode。两者都在Melpa中可用。

Flymd

使用package.el(M-x package-install RET flymd RET)安装,然后只需调用 M-x flymd-flyit 。它使用渲染的降价打开浏览器。

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

不耐烦模式

它的设计目的是使用html,但是doc提供了一个技巧,可以使用markdown。它也像魅力一样,但需要一个配置步骤:

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

要启用降价转换,我们会关注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

  • 返回浏览器,它有效!

答案 1 :(得分:5)

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

  • 在当前缓冲区上执行M-x markdown-other-window并在其他窗口中显示结果。

  • 更改为M-x html-mode并隐藏HTML标记M-x sgml-tags-invisible

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

答案 2 :(得分:2)

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

答案 3 :(得分:1)

我想推荐grip-mode:Github风格的Markdown /组织即时预览。

答案 4 :(得分:1)

在执行this answer中的步骤之前,您需要在系统上安装降价解析器,并且要在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

以类似~/.emacs.d/init.el的方式将markdown解析器映射到主模式:

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

答案 5 :(得分:0)

@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))

使用方法:

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

答案 6 :(得分:0)

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