EXAMPLE SITE TITLE

# @pwrs/zero-md > Ridiculously simple markdown displayer - a native web component based on Custom Elements v1 specs to load and display an external MD file. Latest version **1.4.0** (published 2020-08-12) · MIT license · 0 weekly downloads ## Install ```sh npm install @pwrs/zero-md pnpm add @pwrs/zero-md yarn add @pwrs/zero-md bun add @pwrs/zero-md ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned. ## Facts | | | |---|---| | Version | 1.4.0 | | Published | 2020-08-12 | | First published | 2020-08-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 107.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 558 | | Author | Jason Lee | | Maintainers | bennyp | | Keywords | webcomponents, customelements, markdown-to-html, marked, prism | ## Links - npm: https://www.npmjs.com/package/@pwrs/zero-md - Repository: https://github.com/zerodevx/zero-md - Homepage: https://zerodevx.github.io/zero-md - Issues: https://github.com/zerodevx/zero-md/issues - npm.io page: https://npm.io/package/@pwrs/zero-md ## Alternatives - [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads - [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads - [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads - [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads - [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads ## Recent versions - 1.4.0 (latest) — 2020-08-12 ## README ![GitHub release](https://img.shields.io/github/release/zerodevx/zero-md) ![jsDelivr hits (GitHub)](https://img.shields.io/jsdelivr/gh/hm/zerodevx/zero-md) # `` Ridiculously simple markdown displayer - a native web component based on [Custom Elements v1 specs](https://www.w3.org/TR/custom-elements/) to load and display an external MD file. Instantly create beautiful HTML pages from Markdown. Like it isn't easy enough. While it's already remarkably trivial to render markdown into HTML ([Marked](https://github.com/markedjs/marked)) and syntax-highlight ([Prism](https://github.com/PrismLibrary/Prism)), `` does this better, automagically rendering into its own self-contained Shadow DOM container, while encapsulating implementation details into one embarassingly easy-to-use package. Because web components. All in ~100 lines of code. ## Let's get this money ### Basic usage via CDN (recommended) 1. Import [webcomponents-loader.js](https://github.com/webcomponents/webcomponentsjs). ```html ``` Note: It seems there has been a regression in `webcomponentsjs` that broke support for Firefox `v60` as reported in [#19](https://github.com/zerodevx/zero-md/issues/19). If you need to support super old Firefoxes, it's recommended to pin `webcomponentsjs` to `v2.2.10`. ```html ``` 2. Import `` web component. ```html ``` 3. Profit! ```html ``` ### Async usage ```html ... ... ``` ### Advanced usage 1. Use your own markdown and highlight stylesheets instead. ```html ``` 2. Or pass markdown strings directly into the element. ```html ``` 3. Or pass your own CSS definitions directly into the element. ```html ``` 4. Or put it all together. ```html ``` ## Instantly publish HTML from Markdown Create a beautiful HTML web page from Markdown in literally 1 minute. Copy and paste the below boilerplate code into an empty `index.html` file, edit, and it's ready to be served from any static host. **index.html** ([download](https://raw.githubusercontent.com/zerodevx/zero-md/master/boilerplate/index.html)) ```html EXAMPLE SITE TITLE

``` `` works fantastically well for publishing quick project pages, info, news, homepages etc. It doesn't get easier than this. ## Install locally 1. Install via NPM. ``` npm install --save zero-md ``` 2. Optionally install [webcomponents.js](https://www.npmjs.com/package/@webcomponents/webcomponentsjs), [Prism](https://www.npmjs.com/package/prismjs) and [Marked](https://www.npmjs.com/package/marked) if you wish to host them yourself. ``` npm install --save @webcomponents/webcomponentsjs prismjs marked ``` 3. Use locally. ```html ... ... ... ... ... ``` ## Develop and contribute 1. Clone the repo. ``` git clone https://github.com/zerodevx/zero-md.git && cd zero-md ``` 2. Install dependencies. ``` npm install && bower install ``` 3. Start your favourite web server. ``` python -m SimpleHTTPServer 8000 ``` 4. Run tests from your browser. ``` http://localhost:8000/test/zero-md_test.html ``` 5. Lint your code. ``` npm run lint ``` 6. And build it if you wish to. ``` npm run build ``` 7. Noticed a bug? Have a feature request? Raise an [issue](https://github.com/zerodevx/zero-md/issues). 8. Or even better, open a [PR](https://github.com/zerodevx/zero-md/pulls)! ## Demo [This page](https://raw.githubusercontent.com/zerodevx/zero-md/master/index.html), actually. Or for a more comprehensive example demonstrating the various features, [try this](https://zerodevx.github.io/zero-md/demo). ## API ### Behavior In order of priority, `` first tries to retrieve the markdown string from its `` child; if none is defined, `` next attempts to retrieve from the URL defined in the `src` attribute via ajax. Likewise, for CSS styles, `` first tries to retrieve the styles defined in ``; if none, `` next attempts to retrieve *all* the external stylesheets defined in the `css-urls` attribute array. ### Host styles By default, each `` instance has the following styles applied to itself. ```css :host { display: block; position: relative; contain: content; } ``` These are [sensible defaults](https://github.com/zerodevx/zero-md/issues/13) that should apply to most use-cases and also help normalise behavior across browsers - since the `contain` CSS property is [only implemented in Chrome](https://developer.mozilla.org/en-US/docs/Web/CSS/contain). The beauty of web components is that you can easily override these defaults from outside the element to suit your needs. ```html ``` ### Default configs By default, `` loads the ([Marked](https://github.com/markedjs/marked)) JS library from CDN [here](https://cdn.jsdelivr.net/npm/marked@0/marked.min.js); and the ([Prism](https://github.com/PrismLibrary/Prism)) JS library from [here](https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js). These URL locations can be overridden by setting the `marked-url` and `prism-url` attributes respectively. For styles, by default the `css-urls` attribute contains a list of Github markdown stylesheet from [here](https://cdn.jsdelivr.net/npm/github-markdown-css@2/github-markdown.min.css), and a light-themed highlight stylesheet from [here](https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css). The defaults can be overridden by setting that attribute with an array of URLs in **valid JSON format**. | Attribute | Type | Default value | |-------------------|------------|----------------| | marked-url | String | `https://cdn.jsdelivr.net/npm/marked@0/marked.min.js` | | prism-url | String | `https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js` | | css-urls | Array | `["https://cdn.jsdelivr.net/npm/github-markdown-css@2/github-markdown.min.css", "https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css"]` | These defaults can be overridden **globally** by setting the `ZeroMd.config` global. Note that setting the global config will apply to **all** instances of `` in the document. ```html ... ... ... ... ``` 1. When setting global config, ensure that the `window.ZeroMd.config` object is defined **before** importing the `` element definition. 2. The following configs are exposed (in camelCase): `markedUrl`, `prismUrl` and `cssUrls`. ### Published Attributes | Attribute | Type | Description | |-------------------|------------|-------------| | src | String | URL location to `GET` the markdown text file via ajax. | | manual-render | Boolean | If set, disables auto-rendering of this instance. Call the `render()` function on that instance to start manually. | | marked-url | String | URL of the Marked JS library. | | prism-url | String | URL of the Prism JS library. | | css-urls | String | An array of stylesheet URLs to apply to this instance in **valid JSON**. | | no-shadow | Boolean | If set, renders and stamps this instance into **Light DOM** instead. Please know what you're doing. | For `css-urls`, please ensure that the value is an **Array** in **valid JSON** format. For example: ```html ``` ### Public Methods | Method | Parameters | Description | |----------|-------------|-----------------------------------------------------| | render() | *none* | Starts the markdown conversion and stamps into DOM. | By default, each instance automatically calls the `render()` method on start-up. To prevent this behavior, add the attribute `manual-render` to your `` element, and manually call this method to begin rendering. For example: ```html ... ``` Note that if changes are made to `` attributes or `