Skip to content
Fast modular regex-based Markdown parser.
HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
rules
test
.gitignore
CONTRIBUTING.md
README.md
bower.json
hero.svg
index.html
s-markdown-rules.html
s-markdown.html

README.md

<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

You can’t perform that action at this time.