如何使Emacs无需保存文件即可呈现HTML？

如果您曾经使用过JS Bin，那么您会知道在键入代码（HTML，CSS，Javascript）时，右侧的内容会进行更新以适合您键入的内容。我发现这是制作少量代码片段的最有用的工具之一。但是，我希望在Emacs中实现相同的功能。

因此，当我在Emacs缓冲区中键入/编辑代码时，网页将异步刷新或加载，而无需保存文件或刷新页面。

附带说明：我不在乎Web浏览器是内部的（如w3）还是外部的（如Google Chrome）。

我首选的用于实时编辑HTML文档的工具是skewer-mode。它无需刷新即可在浏览器中更新文档，因此您可以立即获得有关更改的反馈。

这是一个演示视频，演示了它的运行情况。

它具有用于实时编辑HTML，CSS和JavaScript的模式。它对JavaScript最有用，因为它启用了工作流程，就像在Emacs Lisp上进行黑客攻击一样。

skewer模式有多种扩展，例如skewer-less，用于编辑LESS样式表，skewer-reload-stylesheets，用于在多个样式表中实时编辑CSS（公开：我写过一个）。

不耐烦的模式将带给您大部分帮助。这是一个很酷的视频。

在进行第一次样式设计和原型制作时特别方便。由于它呈现了当前缓冲区，因此您必须将所有html和css放在一个缓冲区中，对代码进行调整，直到满意为止，然后将其全部分离出来。

甚至Javascript也可以用相同的方式进行处理-但它有点棘手，因为基本上每个按键都在渲染缓冲区，所以最终会出现很多错误，而在编写代码时会出错！

我建议的工作流程是

• 创建一个HTML页面，并通过标签包含所有不变的内容
• 启动不耐烦模式，打开浏览器并转到页面
• 编写一场风暴
• 开心就分开HTML，CSS，JS

当您可以同时在多个浏览器中键入内容并立即使更新可见时，对客户端尤其印象深刻：）

您可以编写次要模式，以在修改任何相关缓冲区后刷新呈现的网页。当然，在每次击键之后这样做都是过大的，因此在emacs空闲时使用计时器并渲染

快速POC为：

(defvar my-html-render-delay 1)

(defun my-html-render-post-command-hook ()
  (run-with-idle-timer my-html-render-delay nil
                       (lambda (buffer) 
                         (shr-render-buffer buffer)
                         (select-window (get-buffer-window buffer))) 
                       (current-buffer)))

(defun my-html-render-install ()
  (interactive)
  (add-hook 'post-command-hook 'my-html-render-post-command-hook nil t))

此代码有很多错误（例如，窗口处理很糟糕，但是它正在使用shr，这绝对会帮助您使用javascript），但是它给出了这个主意。开发一个完整的解决方案当然是可能的，但这本身就是一个小项目。