Directory

← Back

s-markdown

Fast modular regex-based Markdown parser.

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/StartPolymer/s-markdown on 2019-05-22 ]

<s-markdown>

Fast modular regex-based Markdown parser.

Inspired by <marked-element> and Slimdown.

<s-markdown> accepts Markdown source, and renders it to a child element with the class 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 class, the Markdown source will still be rendered, but to a shadow DOM child that cannot be styled.

The Markdown source can be specified either via the markdown attribute:

<s-markdown markdown="`Markdown` is _awesome_!" rules="code em">
  <div class="markdown-html"></div>
</s-markdown>

Or, you can provide it via a <script type="text/markdown"> element child:

<s-markdown rules="a blockquote code del em-strong h hr img ol q ul p">
  <div class="markdown-html"></div>
  <script type="text/markdown">
    ## This is an h2 tag
    ### This is an h3 tag

    ---

    `var inlineCode = 0;`

    *italic text* | _italic text_

    **bold text** | __bold text__

    ***italic bold text*** | ___italic bold text___

    ~~Scratch this.~~

    :"Quote text":

    > blockquote

    - item 1
    - item 2
    - item 3

    1. item 1
    2. item 2
    3. item 3

    [Link](https://www.polymer-project.org)

    ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png)

    <img src="http://example.com/test_skipping_em_rule_for_line_contain_html_tag.html">
  </script>
</s-markdown>

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

Styling

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

.markdown-html p {
  color: red;
}

.markdown-html td:first-child {
  padding-left: 24px;
}

License

MIT: StartPolymer/license

Compatibility

(Loading compatibility data...)

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#Polymer/polymer#^1.1.0
Released
2017-07-24
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 1.0+
Browser
Browser Independent

s-markdown - Vaadin Add-on Directory

Fast modular regex-based Markdown parser. s-markdown - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/StartPolymer/s-markdown](https://github.com//StartPolymer/s-markdown/blob/v0.1.5/README.md) on 2019-05-22 ]** ## <s-markdown> Fast modular regex-based Markdown parser. Inspired by [<marked-element>](https://github.com/PolymerElements/marked-element) and [Slimdown](https://gist.github.com/jbroadway/2836900). `` accepts Markdown source, and renders it to a child element with the class `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` class, the Markdown source will still be rendered, but to a shadow DOM child that cannot be styled. The Markdown source can be specified either via the `markdown` attribute: ```html
``` Or, you can provide it via a `
``` Note that the `
Online