&color=lightgray)
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:
- [x] Math rendering via KaTeX
- [x] Mermaid diagrams
- [x] Syntax highlighting via highlight.js
- [x] Language detection for unhinted code blocks
- [x] Hash-link scroll handling
- [x] FOUC prevention
- [x] Auto re-render on input changes
- [x] Light and dark themes
- [x] 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! 🙏
