Ridiculously simple zero-config markdown displayer
A zero-config web component that converts markdown to HTML. Built on the
Custom Elements V1 specification, it renders markdown
inside a self-contained Shadow DOM container. Under the hood, it uses
marked for parsing and
highlight.js for syntax highlighting.
- Math rendering via
KaTeX - Diagrams via
Mermaid - Syntax highlighting with auto-language detection
- Hash-link scroll handling for anchor navigation
- FOUC prevention (Flash of Unstyled Content)
- Auto re-render when inputs or attributes change
- Light and dark themes out of the box
- Spec-compliant extensibility
Important
Markdown files must be served over HTTP/HTTPS. Browsers restrict local file access (via the
file:// protocol) due to security policies, and standard
CORS rules apply.
Read the documentation: https://zerodevx.github.io/zero-md/
Note
This is the v3 branch. If you are looking for the older version, see the
v2 branch. If you are upgrading from v2, read the
migration guide.
zero-md is designed to be zero-config with good defaults. For most use-cases, simply import the
script directly from CDN:
<head><!-- Import element definition and auto-register --><scripttype="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script></head><body><!-- Profit! --><zero-mdsrc="example.md"></zero-md></body>Tip
To auto-register the custom element, import with the ?register query param.
The above is semantically equivalent to the below loading pattern:
<head><scripttype="module">// Import element definitionimportZeroMdfrom'https://cdn.jsdelivr.net/npm/zero-md@3'// RegistercustomElements.define('zero-md',ZeroMd)</script></head>Install the package via npm:
npm i zero-mdImport and register the element in your JavaScript application:
// Import the element definitionimportZeroMdfrom'zero-md'// Register the custom elementcustomElements.define('zero-md',ZeroMd)// Render anywhereapp.render(`<zero-md src=${src}></zero-md>`,target)For a self-contained, pre-bundled package, check out
zero-md-bundled.
<!-- Display an external markdown file --><zero-mdsrc="https://example.com/markdown.md"></zero-md><!-- Write markdown inline --><zero-md><scripttype="text/markdown">
# Thisismy[markdown](https://example.com)</script></zero-md><!-- Add custom styles while keeping defaults --><zero-mdsrc="https://example.com/markdown.md"><templatedata-append><style>p { color: red; }
</style></template></zero-md>Read the documentation: https://zerodevx.github.io/zero-md/
Note
Requires a modern evergreen browser (Shadow DOM + Custom Elements v1 support). No IE11 support.
Clone the repository and install dependencies:
git clone https://github.com/zerodevx/zero-md.git
cd zero-md
npm iStart the development server (powered by Vite):
npm run devOpen http://localhost:5173 in your browser to view the test page. The library source files are
located in src/lib/.
Run the test suite using Playwright:
npm testTest specifications are located in src/index.spec.js. Please ensure all tests pass before
submitting a pull request.
Please open a new issue or discussion on GitHub to request features or report bugs.
We follow the standard GitHub contribution workflow.
Documentation source files are located in the docs/ folder. Submit pull requests to the .md
files directly. The documentation website uses
zero-md-docs to automatically publish changes from the
docs/ folder upon merge.
ISC