Easy self-rendering Markdown pages
.html
files that gets auto-rendered everywhere
file:///document.html
documents
Installation
You can Ctrl+S the ezmdpage.min.js
file to
download it and load it locally (for offline use) or use an npm CDN like
unpkg.com or jsDelivr to load it from the web:
<script src="ezmdpage.min.js"></script><plaintext>
<script src="https://unpkg.com/ezmdpage@2"></script><plaintext>
<script src="https://cdn.jsdelivr.net/npm/ezmdpage@2"></script><plaintext>
π‘ You may also configure your formatter & editor
To get the best editing experience, you can configure Prettier or your other
favorite formatter to use its Markdown parser/beautifier on .html
files.
// package.json
{
"prettier": {
"overrides": [
{
"files": ["*.html"],
"options": {
"parser": "markdown"
}
}
]
}
}
.ezmdpage.html
or something if you
have other non-ezmdpage HTML content in your workspace too.
.html
files. You can do this by adding this to your
.vscode/settings.json
file:
{
"files.associations": {
"*.html": "markdown"
}
}
Usage
After adding the magic <script>
to your .md.html
file, you can get started
editing your document in ernest! You can use any relgular old text editor to
compose your markdown; even Windows Notepad works great! ezmdpage even works
with local file:
URLs: you can just email or share a plain .html
file with
someone, and they will be able to open and view it.
<script src="https://unpkg.com/ezmdpage@2"></script><plaintext>
# Hello world!
This is my **Markdown document**! There's some <mark>HTML</mark> elements in
here <u>too</u> since Markdown supports _inline HTML_.
| Look at this cool π GFM table! | Wow! |
| ------------------------------- | ------------------- |
| We can even do math! | $ax^2 + bx + c = 0$ |
```js
console.log("Code highlighting works too!");
```
> All other Markdown features work as expected.
<script>
// You can even use <script> tags! There's NO SAFETY FILTER for HTML elements.
const html = `<p>It's ${new Date().toLocaleTimeString()}!</p>`;
document.body.append(document.createRange().createContextualFragment(html));
</script>
test/
folder demos!
Development
This project uses Vite to create a IIFE bundle of all the CSS and JavaScript that gets injected into the page. It's basically just Marked & HighlightJS. We use vite-plugin-css-injected-by-js to inline the CSS into the JavaScript bundle.
main
field in package.json
and not the new exports
field. This is because unpkg.com doesn't support the new exports
field. See
mjackson/unpkg#265. unpkg.com is the most popular CDN for non-ESM npm
packages, so it makes sense to bend over backwards to support it.