https://github.com/honmaple/emacs-maple-preview
markdown, org-mode or html realtime preview on Emacs
https://github.com/honmaple/emacs-maple-preview
Last synced: 8 months ago
JSON representation
markdown, org-mode or html realtime preview on Emacs
- Host: GitHub
- URL: https://github.com/honmaple/emacs-maple-preview
- Owner: honmaple
- License: gpl-3.0
- Created: 2019-01-11T02:04:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-19T08:23:20.000Z (almost 2 years ago)
- Last Synced: 2025-03-20T16:52:02.278Z (over 1 year ago)
- Language: CSS
- Size: 2.05 MB
- Stars: 24
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.org
- License: LICENSE
Awesome Lists containing this project
README
* 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
"
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=