在 Mac / Chrome 中实时地预览 Markdown 导出的结果

刚刚发现了一个自动刷新 Chrome 当前 Tab 的 AppleScript 代码(Gist):

tell application "Chrome" to tell the active tab of its first window to reload

利用它能“实时”地预览 Markdown 了,也就是在保存 Markdown 时,Chrome 自动刷新显示结果的页面:

  • M-x chunyang-markdown-preview-in-chrome 在 Chrome 预览,不同于自带的 M-x markdown-preview,它会重用当前的 Tab,不会一直创建新的 Tab
  • M-x chunyang-markdown-preview-in-chrome-mode 一个 Local Minor Mode,会在保存文件时,自动调用上面的命令

(defun chunyang-chrome-refresh ()
  "Refresh the current tab of Chrome."
  (do-applescript
   "tell application \"Chrome\" \
to tell the active tab of its first window to reload"))

(defun chunyang-chrome-url ()
  "Return the URL of the current tab of Chrome."
  (replace-regexp-in-string
   (rx (or (and string-start ?\")
           (and ?\" string-end)))
   ""
   (do-applescript
    "tell application \"Google Chrome\" to return URL of active tab of first window")))

(defun chunyang-markdown-preview-in-chrome ()
  "Export Markdown and preview the result in Chrome.
This function reuses the current tab of Chrome,
unlike `markdown-preview'."
  (interactive)
  (let ((output (markdown-export)))
    (if (string-match-p (regexp-quote output) (chunyang-chrome-url))
        (chunyang-chrome-refresh)
      (browse-url output))))

(define-minor-mode chunyang-markdown-preview-in-chrome-mode
  "Run `chunyang-markdown-preview-in-chrome' on save."
  :lighter " MD-Preview-in-Chrome"
  (unless (eq major-mode 'markdown-mode)
    (user-error "Error: %s is not Markdown Mode" major-mode))
  (if chunyang-markdown-preview-in-chrome-mode
      (add-hook 'after-save-hook #'chunyang-markdown-preview-in-chrome :append :local)
    (remove-hook 'after-save-hook #'chunyang-markdown-preview-in-chrome :local)))

同样的方法可以用在 Org mode 或者其它的格式,甚至导出的格式也不一定得是 HTML,因为 Chrome 也能支持图片、PDF 等。

4 个赞

贴两张使用场景图,在 Emacs 中编辑 Markdown,保存时 Chrome 自动刷新。中间不会有窗口焦点的变化,或者别的干扰。

图一、

图二、

赞,可惜没有 Mac

关于自动刷新浏览器的页面:

  1. 别的平台(其实 Mac 也行)可以用模拟键盘按键的方法,比如 Linux 下的 xdotool1,但很可能需要切换窗口,这样就会有非常明显的视觉效果,非常讨厌。
  2. http://entrproject.org/ 上提到 Midori 浏览器(支持 Linux 和 Windows)可以通过命令行参数来刷新页面。

除了这几种思路,肯定还有其它的、我没想到的办法。


1 http://entrproject.org/ 上提到了一个 reload-browser 脚本就是利用它实现的。

大部分浏览器刷新都是用的 live-reload 脚本,再配合编辑器只推送文本变动部分。就更“实时”了,变更一个字也给你推送过去,连文件保存都不需要。

1 个赞

我的workflow就是用typora(其他markdown编辑器也可)打开emacs 编辑的markdown文件。绑定一个快捷键到用typora打开当前文件即可。

2 个赞

为什么不试试flymd

这样的好处是可以享受gui下的markdown 编辑器的各种便捷,比方说export,侧栏outline等等。flymd最大的问题是对chrome支持略蛋疼。。。悲剧

flymd有什么问题呢?

官网上说,用chrome需要kill chrome的所有进程,然后才能用。。。这不是灰常蛋疼吗?

最让人感到好奇的是, flymd 的作者 mola-T 接连发布几个包(有些是挺牛逼的包)之后就沉寂了,完全从 github 隐退了。

请问do-applescript这个函数在哪里安装?,我的系统Ubuntu

AppleScript 是 macOS 下才有,其它操作系统没有。

现在用这个吧

写博客的时候,开着vuepress live development,npx vuepress dev docs.保存自动更新刷新浏览器

how? 可否赐教?

https://github.com/ztlevi/doom-config/blob/e3ea137ff6cc4753bb5e16488ba5f9ba5c317683/%2Bos.el#L34