Fast modular regex-based Markdown parser.

[ This description is mirrored from at on 2019-05-22 ]


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


Link to this version
ImportedReleased 24 July 2017MIT License
Framework Support
Polymer 1.0+
Browser Independent
Install with
bower install --save StartPolymer/s-markdown"#0.1.5"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.5


  • polymer#Polymer/polymer#^1.1.0