Skip to content
Fast modular regex-based Markdown parser.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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>

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


    ![alt text](

    <img src="">

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


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;


MIT: StartPolymer/license

You can’t perform that action at this time.