Ridiculously simple zero-config markdown displayer
A vanilla markdown-to-html web component based on Custom Elements V1 specs to load and display an external MD file. Under the hood, it uses marked for super-fast markdown transformation, and highlight.js for lightning-quick syntax highlighting - automagically rendering into its own self-contained shadow DOM container, while encapsulating implementation details into one embarassingly easy-to-use package.
Featuring:
- Math rendering via KaTeX
- Mermaid diagrams
- Syntax highlighting via highlight.js
- Language detection for unhinted code blocks
- Hash-link scroll handling
- FOUC prevention
- Auto re-render on input changes
- Light and dark themes
- Spec-compliant extensibility
Important
Your markdown file(s) must be hosted! Browsers restrict local file access in javascript because security. Standard CORS rules apply.
Note
This is the V3 branch. If you're looking for the older version, see the V2 branch. If you are upgrading from V2, read the migration guide.
Read the docs: https://zerodevx.github.com/zero-md/
zero-md is designed to be zero-config with good defaults. For most use-cases, just importing the
script from CDN and consuming the component directly should suffice.
<head>
...
<!-- Import element definition and auto-register -->
<script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script>
</head>
<body>
...
<!-- Profit! -->
<zero-md src="example.md"></zero-md>
</body>Install the package.
$ npm i zero-md
Import the class, register the element, and use anywhere.
// Import the element definition
import ZeroMd from 'zero-md'
// Register the custom element
customElements.define('zero-md', ZeroMd)
// Render anywhere
app.render(`<zero-md src=${src}></zero-md>`, target)<!-- Simply set the `src` attribute and win -->
<zero-md src="https://example.com/markdown.md"></zero-md>
<!-- Or write markdown inline -->
<zero-md>
<!-- Write your markdown inside a `<script type="text/markdown">` tag -->
<script type="text/markdown">
# **This** is my [markdown](https://example.com)
</script>
</zero-md>
<!-- Or update the style -->
<zero-md src="https://example.com/markdown.md">
<!-- Wrap `style` tags inside `template` -->
<template data-append>
<style>
p {
color: red;
}
</style>
</template>
</zero-md>Read the docs: https://zerodevx.github.com/zero-md/
Open a new issue in the Github repo, or raise a PR! I'd be stoked to accept any contributions!
Standard Github contribution workflow applies.
$ npm run dev
We use Vite for tooling. Point your browser to
http://localhost:5173 and you should see the test page. Library code is at src/lib/.
$ npm test
Tests are through Playwright. Add tests in
src/index.spec.js. Be sure tests pass in your PR.
Documentation is in the /docs folder. Submit PRs onto the .md files directly and the changes
will automatically be published when merged. The public docs setup is based on
zero-md-docs, where one can instantly publish markdown
docs from the Github docs/ folder.
Check out the releases page.
ISC
A big thank you to the following contributors and sponsors! 🙏
