emacs-maple-preview

markdown, org-mode or html realtime preview on Emacs

screenshot

quickstart

(use-package maple-preview
  :quelpa (:fetcher github :repo "honmaple/emacs-maple-preview" :files ("*.el" "index.html" "static"))
  :commands (maple-preview-mode))

Or alternatively, you can download the repository and install manually by doing:

git clone https://github.com/honmaple/emacs-maple-preview ~/.emacs.d/site-lisp/maple-preview

;; These are dependent libraries
(use-package websocket)
(use-package web-server)

(use-package maple-preview
  :ensure nil
  :commands (maple-preview-mode))

customize

;; only enable preview within some special modes
(setq maple-preview:allow-modes '(org-mode markdown-mode html-mode web-mode))
;; How to preview text, export to markdown or html
(setq maple-preview:text-content '((t . maple-preview:markdown-content)))
;; Preview http host
(setq maple-preview:host "localhost")
;; Preview http port, t means use unused port
(setq maple-preview:port t)
;; Delay preview when auto update is non-nil
(setq maple-preview:delay 0.1)
;; Auto open browser
(setq maple-preview:browser-open t)
;; Auto preview when insert
(setq maple-preview:auto-update t)
;; Auto scroll when preview
(setq maple-preview:auto-scroll t)
;; custom css or js file
(add-to-list 'maple-preview:js-file "https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js" t)
(add-to-list 'maple-preview:css-file
             "<style type=\"text/css\">
                body {
                    max-width: 800px;
                }
              </style>" t)

Static Files

• css

  wget https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown.min.css -O static/css/markdown.css
  wget https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css -O static/css/highlight.css
      

• js

  wget https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js -O static/js/jquery.min.js
  wget https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js -O static/js/marked.min.js
  wget https://cdnjs.cloudflare.com/ajax/libs/marked-highlight/2.1.1/index.umd.min.js -O static/js/marked-highlight.min.js
  wget https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js -O static/js/highlight.min.js
  wget https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.0/mermaid.min.js -O static/js/mermaid.min.js
      

FAQ

How to preview Latex within org-mode?

(setq maple-preview:text-content '((org-mode . maple-preview:html-content)
                                   (t . maple-preview:markdown-content)))

Then maple-preview will export org-mode as html with mathjax.js, if you want to custom beautiful css, use

#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="custom.css" />

How to preview mermaid within org-mode?

(defun maple/org-md-example-block (example-block _contents info)
  (format "```%s\n%s\n```"
          (org-element-property :language example-block)
          (org-remove-indentation
           (org-export-format-code-default example-block info))))
(advice-add 'org-md-example-block :override 'maple/org-md-example-block)

Then use src with mermaid flag

graph TD
A[nginx]
B(log)
C(upstream)
A -->|write| B
A -->|send| C

Loading

Not available in windows?

Maybe it’s because of the newline encoding problem in Windows

(defun custom-websocket-text (text)
  (if (eq system-type 'windows-nt)
      (replace-regexp-in-string "\n" "^M" text)
    text))

(advice-add 'maple-preview:websocket-text :filter-return #'custom-websocket-text)

^M is C-q C-m