markdown-element - Vaadin Add-on Directory
A lit-html element that renders Markdown using Commonmark.js
# <markdown-element>
A lit-html element that renders Markdown using Commonmark.js. This is a replacement for the Polymer sponsored ``. `` uses the somewhat outdated Marked parser, while `` uses the up to date and better maintained [Commonmark parser](https://github.com/commonmark/commonmark.js).
This element is designed to be used with Polymer 3 projects. If you want to use it elsewhere or figured out how to easily set it up by itself, please open an issue.
## Set up
Install and save to package.json:
```
npm i --save @intcreator/markdown-element
```
Import where needed:
```javascript
import '@intcreator/markdown-element';
```
## Usage
### `markdown` attribute
The markdown source is taken directly from the `markdown` attribute supplied to the element. The markdown supplied can be dynamically updated to change the rendered markdown.
```html
```
### `src` attribute
The `src` attribute can be used to load a markdown file through AJAX. It overrides the `markdown` attribute. The source can be dynamically updated to change the markdown file displayed.
```html
```
### `
```
## Properties
### `safe`
Use the `safe` property if you are accepting user input that cannot be trusted (to prevent [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting)). This will prevent raw HTML and links beginning in `javascript:`, `vbscript:`, etc. from being rendered. For more details, see the [Commonmark.js README](https://github.com/commonmark/commonmark.js#usage) explanation of `safe`.
```html
```
## Roadmap to 1.0
Here are a few issues that need to be resolved before the 1.0 release:
- Dynamically update markdown when changed in the script tag (if possible) or find another way to dynamically update multiline-markdown
## Contributing
Let's make this element even better! Want to help? Found a problem? Open an issue or contact me on the Polymer Slack, Twitter, etc. @intcreator.
View on GitHub
View on NPM
markdown-element version 0.2.3
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.2
* commonmark#^0.28.1
* lit-html#^0.10.2
* prismjs#^1.15.0
markdown-element version 0.3.0
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.2
* commonmark#^0.28.1
* lit-html#^0.10.2
* prismjs#^1.15.0
markdown-element version 0.3.1
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.2
* commonmark#^0.28.1
* lit-html#^0.10.2
* prismjs#^1.15.0
markdown-element version 0.3.2
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.2
* commonmark#^0.28.1
* lit-html#^0.10.2
* prismjs#^1.15.0
markdown-element version 0.3.3
### Dependencies
* @polymer/lit-element#^0.5.2
* @polymer/polymer#^3.0.2
* commonmark#^0.28.1
* lit-html#^0.10.2
* prismjs#^1.15.0