PolymerElements/marked-element

Name: marked-element

Owner: PolymerElements

Description: Element wrapper for the marked library

Created: 2015-04-16 18:28:17.0

Updated: 2018-01-15 07:32:25.0

Pushed: 2018-01-17 19:55:08.0

Homepage:

Size: 144

Language: HTML

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

<marked-element>

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.

The Markdown source can be specified several ways:

Use the markdown attribute to bind markdown

ked-element markdown="`Markdown` is _awesome_!">
iv slot="markdown-html"></div>
rked-element>

Use <script type="text/markdown"> element child to inline markdown

ked-element>
iv slot="markdown-html"></div>
cript type="text/markdown">
Check out my markdown!

We can even embed elements without fear of the HTML parser mucking up their
textual representation:

```html
<awesome-sauce>
  <div>Oops, I'm about to forget to close this div.
</awesome-sauce>
```
script>
rked-element>

Use <script type="text/markdown" src="URL"> element child to specify remote markdown

ked-element>
iv slot="markdown-html"></div>
cript type="text/markdown" src="../guidelines.md"></script>
rked-element>

Note that the <script type="text/markdown"> approach is static. Changes to the script content will not update the rendered markdown!

Though, you can data bind to the src attribute to change the markdown.

ked-element>
iv slot="markdown-html"></div>
cript type="text/markdown" src$="[[source]]"></script>
rked-element>

ipt>
.
is.source = '../guidelines.md';
ript>

Styling

If you are using a child with the markdown-html slot, you can style it as you would a regular DOM element:

t="markdown-html"] p {
lor: red;


t="markdown-html"] td:first-child {
dding-left: 24px;