0.8.6 • Published 8 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
8 months ago
0.8.6
8 months ago
0.8.4
9 months ago
0.8.3
9 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
10 months ago
0.7.0
11 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