36 Commits
v0.2 ... v0.9

Author SHA1 Message Date
Igor Shymko
134fd33675 doc update; version bump 2017-08-20 14:59:49 +03:00
Igor Shymko
a7415a3d07 Merge pull request #24 from makotoshimazu/restrict_access_from_outside
Restrict accessing form another machine
2017-08-20 14:55:34 +03:00
Makoto Shimazu
3c38932da7 Restrict accessing form another machine 2017-08-18 12:27:04 +09:00
Igor Shymko
50e5baed5c Merge pull request #23 from adelatorrefoss/patch-1
Fix little typo
2017-04-26 23:01:42 +03:00
Antonio de la Torre Fernández
adde5adb58 Fix little typo 2017-04-26 15:25:01 +02:00
Igor Shymko
65f48df07c mesages buffer doc fix 2016-12-22 18:30:14 +02:00
Igor Shymko
b518daf010 readme updated on remote access 2016-12-22 18:17:17 +02:00
Igor Shymko
3a0b2cb8de Doc update: more explicit dependency on markdown-mode command; fixes #21 2016-12-18 21:55:52 +02:00
Igor Shymko
b55c8ddba2 text frame check 2016-12-12 00:43:47 +02:00
Igor Shymko
8f4b2966c1 doc update 2016-12-12 00:37:22 +02:00
Igor Shymko
7634460a77 var renamed 2016-12-12 00:17:33 +02:00
Igor Shymko
73d90fab7c Support multiple preview from same http port 2016-12-11 18:44:45 +02:00
Igor Shymko
73af604f1d Update doc on extra css 2016-12-11 14:04:36 +02:00
Igor Shymko
191365929d Extra stylesheets for preview. Fixes #20 2016-12-11 13:55:24 +02:00
Igor Shymko
322825b9e5 package-lint feedback fixes 2016-12-08 13:59:10 +02:00
Igor Shymko
ce39428d39 favicon.ico 2016-12-07 18:41:09 +02:00
Igor Shymko
e1fce78ad3 http option fix 2016-12-07 10:59:33 +02:00
Igor Shymko
7fb0f3bd11 Open browser preview via http call 2016-12-07 00:43:39 +02:00
Igor Shymko
fffc15e8bd Version bump; depend on web-server; ws/http host&port split 2016-12-06 19:57:12 +02:00
Igor Shymko
2fc9f06fdf Client javascript support: fixes #18 2016-12-05 15:40:52 +02:00
Igor Shymko
0e2edf3f48 Version bump 2016-12-05 13:38:21 +02:00
Igor Shymko
c197aa51cc Do not reload css on every message 2016-12-05 13:36:57 +02:00
Igor Shymko
c415d7e4a7 WS host/port injection fixes #14 2016-12-05 13:19:43 +02:00
Igor Shymko
c9c9bfb449 Merge pull request #19 from z4139jq/patch-1
Fix issue #15
2016-11-22 21:02:57 +02:00
Zenkie Zhu
9c10d6fb08 Fix issue #15
So we can use sindresorhus/github-markdown-css
2016-11-22 19:15:00 +08:00
Igor Shymko
a5de48c4dc Merge pull request #16 from chwarr/host-config
Default to 'local for markdown-preview-host
2016-10-04 15:13:30 +03:00
Christopher Warrington
dc3b2dfba7 Default to 'local for markdown-preview-host
* Prefer to use 'local over "127.0.0.1" to indicate localhost, as the
underlying functions use 'local for localhost.
* Adjust type to be a union of 'local and a string.
2016-10-03 22:04:06 -07:00
Igor Shymko
25f1de2839 untabify 2016-08-30 12:19:08 +03:00
Igor Shymko
639f76437c fix #10 - listen on 127.0.0.1 by default 2016-08-30 12:04:59 +03:00
Igor Shymko
8d48d92324 preview file cleanup 2016-08-29 23:58:12 +03:00
Igor Shymko
60cc2646b8 version bump 2016-08-29 19:33:19 +03:00
Igor Shymko
96bf3b708b Merge pull request #13 from jeanbaptistelab/master
Allow using relative links from the file to preview, references  #11
2016-08-23 17:49:56 +03:00
Jean-Baptiste Lab
90b964e27d Allow using relative links from the file to preview, references issue #11
Change the implementation of "markdown-preview--open-browser-preview" to
copy "preview.html" into the directory of the Markdown file to be
previewed and browse-url that file instead.
2016-08-23 09:48:37 +02:00
Igor Shymko
625c041efd Remove kill buffer hook; version bump 2016-06-04 18:59:54 +03:00
Igor Shymko
ff75e31a57 minor edit 2016-02-15 21:36:07 +02:00
Igor Shymko
b9d815f6b9 Fix sending server frame to all the clients 2016-02-15 18:49:40 +02:00
5 changed files with 267 additions and 92 deletions

2
.gitignore vendored
View File

@@ -3,3 +3,5 @@
# Packaging
.cask
.markdown-preview.html

View File

@@ -4,56 +4,75 @@ Markdown preview mode
[![MELPA Stable](http://stable.melpa.org/packages/markdown-preview-mode-badge.svg)](http://stable.melpa.org/#/markdown-preview-mode)
[![MELPA](http://melpa.org/packages/markdown-preview-mode-badge.svg)](http://melpa.org/#/markdown-preview-mode)
> **Markdown realtime preview minor mode**
Markdown preview in emacs features:
## Description
Opens a preview in a browser, updated upon buffer save.
* on save/idle preview update
* scroll sync
* custom/extra css and javascript
* remote preview
* multiple simultaneous previews
Same preview window is valid across multiple markdown buffers.
Scrolls browser window to keep your editing position visible.
## Install
## Usage
* `package-install markdown-preview-mode`
* `el-get-install markdown-preview-mode`
`M-x markdown-preview-mode` will open preview in a browser and will start `markdown-mode` if it's not yet running for current buffer. If you've closed the preview window, you can start it over with `M-x markdown-preview-open-browser`. All websockets will be cleaned up on emacs termination. If you'd like to perform cleanup manually run `M-x markdown-preview-cleanup`.
### Markdown processor
## Multimarkdown
`markdown-preview-mode` depends on `markdown-mode` for markdown processor, defined by `markdown-command` and it is [markdown](http://daringfireball.net/projects/markdown/) by default. Please, make sure it is in your `$PATH`.
In order to enable multimarkdown support, customize
`M-x customize-option` -> `markdown-command` variable.
Look for `Markdown Command` which is set to `markdown` by default,
set to `multimarkdown` and make sure it's in your PATH.
## Run
## Browser
* `markdown-preview-mode` - start mode and open preview window.
* `markdown-preview-open-browser` - open preview window for current buffer.
* `markdown-preview-cleanup` - cleanup running processes (close websocket and http servers).
In order to select preferred browser, customize
`M-x customize-option` -> `browse-url-browser-function` option.
Select your browser from `Value menu`. If it's not there, follow [EmacsWiki: Browse Url](http://www.emacswiki.org/emacs/BrowseUrl).
## Customize
## Theme
* `customize-option markdown-command` - change markdown processor; take a look at [multimarkdown](http://fletcherpenney.net/multimarkdown/)
* `customize-option` [browse-url-browser-function](http://www.emacswiki.org/emacs/BrowseUrl) - change the browser.
* `customize-option markdown-preview-host` - change http/websocket server address.
* `customize-option markdown-preview-ws-port` - change websocket server port.
* `customize-option markdown-preview-http-port` - change http server port.
* `customize-option markdown-preview-auto-open` - change the way preview window is open.
[Solarized-dark](http://thomasf.github.io/solarized-css/)
## Remote access
In order to change preview styling, run `M-x customize-option` -> `markdown-preview-style`
and specify a URL to your favourite markdown css file.
* Customize `markdown-preview-host` to `0.0.0.0`.
* Customize `markdown-preview-http-host` to `0.0.0.0`.
* Set `markdown-preview-auto-open` to `nil` to disable window opening at remote emacs server.
* Start `markdown-preview-mode`. Http link for preview will be printed to `*Messages*` buffer. If not - run `markdown-preview-open-browser` to get the link printed.
* Setup 2 tunnels for `0.0.0.0:7379` and `0.0.0.0:9000` and then open preview link in local browser. Adjust tunnels according to your custom `ws-port` and `http-port` settings.
## Websocket port
## Extra css
Adjustable by `M-x customize-option` -> `markdown-preview-port`.
### Add extra css to default solarized dark theme
## Installation
### Melpa
```lisp
(add-to-list 'markdown-preview-stylesheets "https://raw.githubusercontent.com/richleland/pygments-css/master/emacs.css")
```
### Override theme completely
*Melpa* recipe is available, so `markdown-preview-mode` is just a `package-install` away!
```lisp
(setq markdown-preview-stylesheets (list "http://thomasf.github.io/solarized-css/solarized-light.min.css"))
```
### el-get
* `M-x el-get-self-update`
* `M-x el-get-install` -> `markdown-preview-mode`
## Extra javascript
### Add MathJax
```lisp
(add-to-list 'markdown-preview-javascript "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML")
```
### async
```lisp
(add-to-list 'markdown-preview-javascript '("http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML" . async))
```
## Dependencies
* [markdown-mode.el](https://github.com/defunkt/markdown-mode)
* [websocket.el](https://github.com/ahyatt/emacs-websocket)
Makes use of `markdown-mode`, which already can transform markdown into html
and `websocket.el` to deliver html to browser.
* [web-server.el](https://github.com/eschulte/emacs-web-server)
* [uuidgen](https://github.com/kanru/uuidgen-el)

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -4,9 +4,9 @@
;; Author: Igor Shymko <igor.shimko@gmail.com>
;; URL: https://github.com/ancane/markdown-preview-mode
;; Keywords: markdown, preview
;; Version: 0.2
;; Package-Requires: ((websocket "1.5") (markdown-mode "2.1") (cl-lib "0.5"))
;; Keywords: markdown, gfm, convenience
;; Version: 0.9
;; Package-Requires: ((emacs "24.3") (websocket "1.6") (markdown-mode "2.0") (cl-lib "0.5") (web-server "0.1.1") (uuidgen "0.3"))
;; This file is not part of GNU Emacs.
@@ -33,6 +33,8 @@
(require 'cl-lib)
(require 'websocket)
(require 'markdown-mode)
(require 'web-server)
(require 'uuidgen)
(defgroup markdown-preview nil
"Markdown preview mode."
@@ -40,92 +42,236 @@
:prefix "markdown-preview-"
:link '(url-link "https://github.com/ancane/markdown-preview-mode"))
(defcustom markdown-preview-port 7379
(defcustom markdown-preview-host "localhost"
"Markdown preview websocket server address."
:group 'markdown-preview
:type 'string)
(defcustom markdown-preview-ws-port 7379
"Markdown preview websocket server port."
:group 'markdown-preview
:type 'integer)
(defcustom markdown-preview-style
"http://thomasf.github.io/solarized-css/solarized-dark.min.css"
"Markdown preview style URI."
(defcustom markdown-preview-http-host "localhost"
"Markdown preview http server address."
:group 'markdown-preview
:type 'string)
(defcustom markdown-preview-http-port 9000
"Markdown preview http server port."
:group 'markdown-preview
:type 'integer)
(defcustom markdown-preview-style nil
"Deprecated. Use `markdown-preview-stylesheets'."
:group 'markdown-preview
:type 'string)
(defcustom markdown-preview-file-name ".markdown-preview.html"
"Markdown preview file name."
:group 'markdown-preview
:type 'string)
(defcustom markdown-preview-auto-open 'http
"Markdown preview websocket server address."
:group 'markdown-preview
:type '(choice (const :tag "As local file" file)
(const :tag "Via http" http)
(const :tag "Off" nil)))
(defvar markdown-preview-javascript '()
"List of client javascript libs for preview.")
(defvar markdown-preview-stylesheets
(list "http://thomasf.github.io/solarized-css/solarized-dark.min.css")
"List of client stylesheets for preview.")
(defvar markdown-preview--websocket-server nil
"`markdown-preview' Websocket server.")
(defvar markdown-preview--http-server nil
"`markdown-preview' http server.")
(defvar markdown-preview--local-client nil
"`markdown-preview' local client.")
(defvar markdown-preview--remote-clients nil
"List of `markdown-preview' websocket remote clients.")
(defvar markdown-preview--remote-clients (make-hash-table :test 'equal)
"Remote clients hashtable. UUID -> WS")
(defvar markdown-preview--preview-url
(concat (file-name-directory load-file-name) "preview.html")
"Location of `markdown-preview' html.")
(defvar markdown-preview--home-dir (file-name-directory load-file-name)
"`markdown-preview-mode' home directory.")
(defvar markdown-preview--idle-timer nil
"Preview idle timer.")
(defvar markdown-preview--uuid nil
"Unique preview identifier.")
(defvar markdown-preview--preview-buffers (make-hash-table :test 'equal)
"Preview buffers hashtable. UUID -> buffer-name.")
(defun markdown-preview--stop-idle-timer ()
"Stop the `markdown-preview' idle timer."
(when (timerp markdown-preview--idle-timer)
(cancel-timer markdown-preview--idle-timer)))
(defun markdown-preview--css-links ()
"Get list of styles for preview in backward compatible way."
(let* ((custom-style (list markdown-preview-style))
(all-styles
(mapc (lambda (x) (add-to-list 'custom-style x t)) markdown-preview-stylesheets)))
(mapconcat
(lambda (x)
(concat "<link rel=\"stylesheet\" type=\"text/css\" href=\"" x "\">"))
all-styles
"\n")))
(defun markdown-preview--scripts ()
"Get list of javascript script tags for preview."
(mapconcat
(lambda (x)
(concat
"<script src=\"" (if (consp x) (car x) x) "\""
(if (consp x) (format " %s" (cdr x)))
"></script>"))
markdown-preview-javascript
"\n"))
(defun markdown-preview--read-preview-template (preview-uuid preview-file)
"Read preview template and writes identified by PREVIEW-UUID
rendered copy to PREVIEW-FILE, ready to be open in browser."
(with-temp-file preview-file
(insert-file-contents (expand-file-name "preview.html" markdown-preview--home-dir))
(when (search-forward "${MD_STYLE}" nil t)
(replace-match (markdown-preview--css-links) t))
(when (search-forward "${MD_JS}" nil t)
(replace-match (markdown-preview--scripts) t))
(when (search-forward "${WS_HOST}" nil t)
(replace-match markdown-preview-host t))
(when (search-forward "${WS_PORT}" nil t)
(replace-match (format "%s" markdown-preview-ws-port) t))
(when (search-forward "${MD_UUID}" nil t)
(replace-match (format "%s" preview-uuid) t))
(buffer-string)))
(defun markdown-preview--start-http-server (port)
"Start http server at PORT to serve preview file via http."
(unless markdown-preview--http-server
(lexical-let ((docroot default-directory))
(setq markdown-preview--http-server
(ws-start
(lambda (request)
(with-slots (process headers) request
(let* ((path (substring (cdr (assoc :GET headers)) 1))
(filename (expand-file-name path docroot)))
(if (string= path "")
(progn
(ws-send-file
process
(expand-file-name
markdown-preview-file-name
(with-current-buffer
(gethash (markdown-preview--parse-uuid headers)
markdown-preview--preview-buffers)
default-directory
))))
(if (string= path "favicon.ico")
(ws-send-file process (expand-file-name path markdown-preview--home-dir))
(if (and (not (file-directory-p filename)) (file-exists-p filename))
(ws-send-file process filename)
(ws-send-404 process)
))))))
markdown-preview-http-port nil :host markdown-preview-http-host)))))
(defun markdown-preview--parse-uuid (headers)
"Find uuid query param in HEADERS."
(let ((found (cl-find-if (lambda (x)
(when (stringp (car x))
(equal "uuid" (format "%s" (car x)))))
headers)))
(when found (cdr found))))
(defun markdown-preview--open-browser-preview ()
"Open the markdown preview in the browser."
(browse-url markdown-preview--preview-url))
(when (eq markdown-preview-auto-open 'file)
(browse-url (expand-file-name markdown-preview-file-name default-directory)))
(when (eq markdown-preview-auto-open 'http)
(browse-url
(format "http://localhost:%d/?uuid=%s" markdown-preview-http-port markdown-preview--uuid)))
(unless markdown-preview-auto-open
(message
(format
"Preview address: http://0.0.0.0:%d/?uuid=%s"
markdown-preview-http-port
markdown-preview--uuid))))
(defun markdown-preview--stop-websocket-server ()
"Stop the `markdown-preview' websocket server."
(clrhash markdown-preview--preview-buffers)
(when markdown-preview--local-client
(websocket-close markdown-preview--local-client))
(when markdown-preview--websocket-server
(delete-process markdown-preview--websocket-server)
(setq markdown-preview--websocket-server nil
markdown-preview--remote-clients nil)))
(setq markdown-preview--websocket-server nil)
(clrhash markdown-preview--remote-clients)))
(defun markdown-preview--stop-http-server ()
"Stop the `markdown-preview' http server."
(when markdown-preview--http-server
(ws-stop markdown-preview--http-server)
(setq markdown-preview--http-server nil)))
(defun markdown-preview--drop-closed-clients ()
"Clean closed clients in `markdown-preview--remote-clients' list."
(setq markdown-preview--remote-clients
(cl-remove-if-not #'websocket-openp markdown-preview--remote-clients)))
(maphash (lambda (ws-uuid websocket)
(unless (websocket-openp websocket))
(remhash ws-uuid markdown-preview--remote-clients))
markdown-preview--remote-clients))
(defun markdown-preview--start-websocket-server ()
"Start `markdown-preview' websocket server."
(when (not markdown-preview--websocket-server)
(setq markdown-preview--websocket-server
(websocket-server
markdown-preview-port
markdown-preview-ws-port
:host markdown-preview-host
:on-message (lambda (websocket frame)
(mapc (lambda (ws)
(websocket-send-text ws
(websocket-frame-payload frame)))
markdown-preview--remote-clients))
:on-open (lambda (websocket)
(push websocket markdown-preview--remote-clients)
(markdown-preview--send-preview-to websocket))
:on-error (lambda (websocket type err) (message (concat "====> Error:" err)))
(let ((ws-frame-text (websocket-frame-payload frame)))
(if (and
(stringp ws-frame-text)
(string-prefix-p "MDPM-Register-UUID: " ws-frame-text))
(let ((ws-uuid (substring ws-frame-text 20)))
(puthash ws-uuid websocket markdown-preview--remote-clients)
(markdown-preview--send-preview-to websocket ws-uuid))
(progn
(websocket-send
(gethash markdown-preview--uuid markdown-preview--remote-clients)
frame))
)))
:on-open (lambda (websocket) (message "Websocket opened"))
:on-error (lambda (websocket type err) (message (format "====> Error: %s" err)))
:on-close (lambda (websocket) (markdown-preview--drop-closed-clients))))
(add-hook 'kill-emacs-hook 'markdown-preview--stop-websocket-server)
(markdown-preview--open-browser-preview)))
(add-hook 'kill-emacs-hook 'markdown-preview--stop-websocket-server))
(markdown-preview--open-browser-preview))
(defun markdown-preview--start-local-client ()
"Start the `markdown-preview' local client."
(when (not markdown-preview--local-client)
(setq markdown-preview--local-client
(websocket-open
(format "ws://localhost:%d" markdown-preview-port)
(format "ws://%s:%d" markdown-preview-host markdown-preview-ws-port)
:on-error (lambda (ws type err)
(message "error connecting"))
:on-close (lambda (websocket)
(setq markdown-preview--local-client nil))))))
(defun markdown-preview--send-preview ()
(defun markdown-preview--send-preview (preview-uuid)
"Send the `markdown-preview' preview to clients."
(when (bound-and-true-p markdown-preview-mode)
(markdown-preview--send-preview-to markdown-preview--local-client)))
(markdown-preview--send-preview-to markdown-preview--local-client preview-uuid)))
(defun markdown-preview--send-preview-to (websocket)
(defun markdown-preview--send-preview-to (websocket preview-uuid)
"Send the `markdown-preview' to a specific WEBSOCKET."
(let ((mark-position-percent
(number-to-string
@@ -134,14 +280,17 @@
(/
(float (- (line-number-at-pos) (/ (count-screen-lines (window-start) (point)) 2)))
(count-lines (point-min) (point-max))))))))
(markdown markdown-output-buffer-name)
(with-current-buffer (get-buffer markdown-output-buffer-name)
(let ((md-buffer (gethash preview-uuid markdown-preview--preview-buffers)))
(when md-buffer
(with-current-buffer md-buffer
(markdown markdown-output-buffer-name))))
(with-current-buffer markdown-output-buffer-name ;; get-buffer
(websocket-send-text websocket
(concat
"<div>"
"<span id='style'>"
markdown-preview-style
"</span>"
"<span id='position-percentage'>"
mark-position-percent
"</span>"
@@ -153,17 +302,31 @@
(defun markdown-preview--start ()
"Start `markdown-preview' mode."
(setq-local markdown-preview--uuid (uuidgen-1))
(puthash markdown-preview--uuid (buffer-name) markdown-preview--preview-buffers)
;; (gethash markdown-preview--uuid markdown-preview--preview-buffers)
(markdown-preview--read-preview-template
markdown-preview--uuid
(expand-file-name markdown-preview-file-name default-directory))
(markdown-preview--start-websocket-server)
(markdown-preview--start-local-client)
(markdown-preview--start-http-server markdown-preview-http-port)
(setq markdown-preview--idle-timer
(run-with-idle-timer 2 t 'markdown-preview--send-preview))
(add-hook 'after-save-hook 'markdown-preview--send-preview nil t)
(add-hook 'kill-buffer-hook 'markdown-preview--stop))
(run-with-idle-timer 2 t (lambda ()
(when markdown-preview--uuid
(markdown-preview--send-preview markdown-preview--uuid)))))
(add-hook 'after-save-hook (lambda ()
(when markdown-preview--uuid
(markdown-preview--send-preview markdown-preview--uuid))) nil t))
(defun markdown-preview--stop ()
"Stop `markdown-preview' mode."
(remove-hook 'after-save-hook 'markdown-preview--send-preview t)
(markdown-preview--stop-idle-timer))
(markdown-preview--stop-idle-timer)
(remhash markdown-preview--uuid markdown-preview--preview-buffers)
(let ((preview-file (concat (file-name-directory (buffer-file-name)) markdown-preview-file-name)))
(if (file-exists-p preview-file)
(delete-file preview-file))))
;;;###autoload
(defun markdown-preview-open-browser ()
@@ -175,7 +338,8 @@
(defun markdown-preview-cleanup ()
"Cleanup `markdown-preview' mode."
(interactive)
(markdown-preview--stop-websocket-server))
(markdown-preview--stop-websocket-server)
(markdown-preview--stop-http-server))
;;;###autoload
(define-minor-mode markdown-preview-mode

View File

@@ -4,47 +4,37 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>Markdown preview</title>
<link href="http://thomasf.github.io/solarized-css/solarized-dark.min.css" rel="stylesheet"></link>
<style>
code.json {
line-height: 1.2em;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
${MD_STYLE}
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
${MD_JS}
<script>
(function($, undefined) {
var socket = new WebSocket("ws://localhost:7379");
var socket = new WebSocket("ws://${WS_HOST}:${WS_PORT}");
socket.onopen = function() {
console.log("Connection established.");
socket.send("MDPM-Register-UUID: ${MD_UUID}");
};
socket.onclose = function(event) {
if (event.wasClean) {
alert('Connection closed gracefully.');
console.log('Connection closed gracefully.');
} else {
alert('Connection terminated.');
console.log('Connection terminated.');
}
console.log('Code: ' + event.code + ' reason: ' + event.reason);
};
socket.onmessage = function(event) {
loadCSS($(event.data).find("#style").text());
$("#markdown-body").html($(event.data).find("#content").html());
var scroll = $(document).height() * ($(event.data).find("#position-percentage").html() / 100);
$("html, body").animate({ scrollTop: scroll }, 600);
};
socket.onerror = function(error) {
alert("Error: " + error.message);
};
loadCSS = function(href) {
var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
$("link[rel='stylesheet']").remove();
$("head").append(cssLink);
console.log("Error: " + error.message);
};
})(jQuery);
</script>
</head>
<body>
<article id="markdown-body">
<article id="markdown-body" class="markdown-body">
<p>Markdown preview</p>
</article>
</body>