0.8.6 • Published 9 months ago
@mryhryki/markdown-preview v0.8.6
markdown-preview
Markdown realtime preview on browser with your favorite editor.
Concept
- Execute immediately with npx.
- Offline support if installed.
- You can create your own template easily.
Demo
Usage
npx
$ npx @mryhryki/markdown-preview
Version : v0.6.0
Root Directory : /current/dir
Default File : README.md
Extensions : md, markdown
Template File : /path/to/template/default.html
Preview URL : http://localhost:34567
npm / yarn (install)
$ npm install -g @mryhryki/markdown-preview
# or
$ yarn install -g @mryhryki/markdown-preview
$ markdown-preview
Version : v0.6.0
Root Directory : /current/dir
Default File : README.md
Extensions : md, markdown
Template File : /path/to/template/default-dark.html
Preview URL : http://localhost:34567
Parameter
short | long | environment variable | parameter | required | default |
---|---|---|---|---|---|
-f | --file | MARKDOWN_PREVIEW_FILE | relative file path | no | README.md |
-e | --extensions | MARKDOWN_PREVIEW_EXTENSIONS | comma separated extensions | no | md,markdown |
-t | --template | MARKDOWN_PREVIEW_TEMPLATE | defined template name (1) or template file path (2) | no | default |
-p | --port | MARKDOWN_PREVIEW_PORT | port number | no | 34567 |
--log-level | MARKDOWN_PREVIEW_LOG_LEVEL | trace, debug, infowarn, error, fatal | no | info | |
--no-opener | MARKDOWN_PREVIEW_NO_OPENER | true (only env var) | no | ||
-v | --version | no | |||
-h | --help | no |
*1: Defined Template Names
default
*2: How to create a template file
You just need to load /markdown-preview-websocket.js
and register a callback to connectMarkdownPreview
.
A simple example code is below:
<!doctype html>
<html>
<head>
<title>Minimum Template Sample</title>
</head>
<body>
<pre id="raw-markdown"></pre>
<script type="module">
import { connectMarkdownPreview } from "/markdown-preview-websocket.js";
connectMarkdownPreview(({ markdown }) => {
document.getElementById('raw-markdown').innerHTML =
markdown.replace(/</g, '<').replace(/>/g, '>');
});
</script>
</body>
</html>
Development
$ npm install
# Watch mode
$ npm run dev
# Build and Run
$ npm start
# Test
$ npm test
$ npm run test:watch
# Type check
$ npm run type
$ npm run type:watch
# Check code format
$ npm run lint
# Formatter
$ npm run fmt
Release
Run release workflow.
0.8.5
9 months ago
0.8.6
9 months ago
0.8.4
9 months ago
0.8.3
10 months ago
0.8.2
10 months ago
0.8.1
10 months ago
0.8.0
10 months ago
0.7.2
10 months ago
0.7.1
11 months ago
0.7.0
12 months ago
0.6.2
1 year ago
0.6.1
1 year ago
0.6.0
1 year ago
0.5.9
1 year ago
0.5.8
1 year ago
0.5.7
1 year ago
0.5.6
1 year ago
0.5.4
1 year ago
0.5.5
1 year ago
0.5.3
1 year ago
0.5.2
1 year ago
0.5.1
1 year ago
0.5.0
2 years ago
0.4.1
2 years ago
0.4.3
2 years ago
0.4.2
2 years ago
0.3.2
3 years ago
0.4.0
3 years ago
0.3.11
4 years ago
0.3.10
4 years ago
0.3.8
4 years ago