Element wrapper for the marked library.
<marked-element> accepts Markdown source, and renders it to a child
element with the slot markdown-html. This child element can be styled
as you would a normal DOM element. If you do not provide a child element
with the markdown-html slot, the Markdown source will still be rendered,
but to a shadow DOM child that cannot be styled.
See: Documentation, Demo.
npm install --save @polymer/marked-element
<html><head><scripttype="module">import'@polymer/marked-element/marked-element.js';</script><style>
[slot="markdown-html"] p {
color: red;
}
</style></head><body><marked-element><divslot="markdown-html"></div><scripttype="text/markdown">Checkoutmymarkdown!WecanevenembedelementswithoutfearoftheHTMLparsermuckinguptheirtextual representation:
```html <awesome-sauce> <div>Oops, I'm about to forget to close this div. </awesome-sauce> ```</script></marked-element></body></html>import{PolymerElement,html}from'@polymer/polymer';import'@polymer/marked-element/marked-element.js';classSampleElementextendsPolymerElement{staticgettemplate(){returnhtml`<style> [slot="markdown-html"] p {color: red; }</style><marked-element><divslot="markdown-html"></div><scripttype="text/markdown">Checkoutmymarkdown!WecanevenembedelementswithoutfearoftheHTMLparsermuckinguptheirtextual representation: \`\`\`html<awesome-sauce><div>Oops, I'm about to forget to close this div.</awesome-sauce> \`\`\`</script></marked-element> `;}}customElements.define('sample-element',SampleElement);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/PolymerElements/marked-element
cd marked-element
npm install
npm install -g polymer-clipolymer serve --npm
open http://127.0.0.1:<port>/demo/polymer test --npm