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 embarrassingly easy-to-use package.
Featuring:
&color=lightgray)
KaTeXMermaid diagramshighlight.js[!IMPORTANT]
Your markdown file(s) must be hosted! Browsers restrict local file access in javascript because security. Standard CORS rules apply.
Read the docs: https://zerodevx.github.io/zero-md/
[!NOTE]
This is the V3 branch. If you're looking for the older version, see the V2 branch. If you're upgrading from V2, read the migration guide.
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.io/zero-md/
Open a new issue in the Github repo, or raise a PR - I'd be stoked to hear from you!
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 in src/lib/.
$ npm test
Tests via Playwright. Test specs 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 changes will be
automatically published upon merge. Documentation website uses
zero-md-docs to instantly publish markdown from the
Github docs/ folder.
Check out the releases page.
ISC
A big thank you to the project contributors and sponsors! :pray:
FAQs
Ridiculously simple zero-config markdown displayer
The npm package zero-md receives a total of 3,198 weekly downloads. As such, zero-md popularity was classified as popular.
We found that zero-md demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.