markdown-element
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 <marked-element>
. <marked-element>
uses the somewhat outdated Marked parser, while <markdown-element>
uses the up to date and better maintained Commonmark parser.
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:
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.
<markdown-element markdown="This **demo** uses the `markdown` _attribute_, not `src`"></markdown-element>
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.
<markdown-element src="./demo.md"></markdown-element>
<script>
tag
A <script>
tag can be inserted inside of the <markdown-element>
to provide the markdown source. It overrides the markdown
and src
attributes. Support for changing this markdown source dynamically is not yet implemented.
<markdown-element>
<script type="text/markdown">
This demo uses a `<script>` tag.
</script>
</markdown-element>
Properties
safe
Use the safe
property if you are accepting user input that cannot be trusted (to prevent XSS attacks). This will prevent raw HTML and links beginning in javascript:
, vbscript:
, etc. from being rendered. For more details, see the Commonmark.js README explanation of safe
.
<markdown-element safe>
<script type="text/markdown">
This <button onclick="alert('JavaScript executed')">button</button> is evil
</script>
</markdown-element>
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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
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
- Released
- 2018-07-12
- Maturity
- IMPORTED
- License
- BSD 3-clause "New" or "Revised" License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
markdown-element - Vaadin Add-on Directory
A lit-html element that renders Markdown using Commonmark.jsView 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