emacs-maple-preview

emacs-maple-preview copied to clipboard

• emacs-maple-preview markdown, org-mode or html realtime preview on Emacs

** screenshot [[https://github.com/honmaple/emacs-maple-preview/blob/master/screenshot/preview.gif]]

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

Or alternatively, you can download the repository and install manually by doing: #+BEGIN_SRC sehll git clone https://github.com/honmaple/emacs-maple-preview ~/.emacs.d/site-lisp/maple-preview #+END_SRC

#+begin_src elisp ;; These are dependent libraries (use-package websocket) (use-package web-server)

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

#+end_src

** customize #+begin_src elisp ;; 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; } " t) #+end_src

• Static Files

  • css #+begin_example 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 #+end_example
  • js #+begin_example 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 #+end_example

• FAQ ** How to preview Latex within org-mode? #+begin_src elisp (setq maple-preview:text-content '((org-mode . maple-preview:html-content) (t . maple-preview:markdown-content))) #+end_src Then maple-preview will export org-mode as html with mathjax.js, if you want to custom beautiful css, use

  #+begin_example #+HTML_HEAD: #+end_example ** How to preview mermaid within org-mode? #+begin_src elisp (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)

  #+end_src

  Then use src with mermaid flag #+begin_src mermaid graph TD A[nginx] B(log) C(upstream) A -->|write| B A -->|send| C #+end_src ** Not available in windows? Maybe it's because of the newline encoding problem in Windows #+begin_src elisp (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) #+end_src

  =^M= is =C-q C-m=