node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Markdown Element

HTML Element for markdown content.


  <script src=""></script> 
    ## h2
    * test
      * test2
    let x = 'asdf'
    class Text {
      constructor() {


The following element properties can be used to change the render settings. They can be set either from JavaScript or from HTML.

  • noGFM: Disables GitHub flavored markdown (GFM).
  • noTables: Disables GFM tables. This has no effect if noGFM is true.
  • breaks: Enable GFM line breaks. This has no effect if noGFM is true.
  • noHighlight: Disables syntax highlighting.
  • pedantic: Conform to obscure parts of as much as possible. Don't fix any of the original markdown bugs or poor behavior.
  • noSmartLists: Disable smarter list behavior than the original markdown. May eventually be default with the old behavior moved into pedantic.
  • smartyPants: Use "smart" typographic punctuation for things like quotes and dashes.


<mark-down notables pedantic>
    # h1
    * test
let marked = document.createElement('mark-down')
marked.noGFM = true
marked.smartyPants = true


The rendered markdown is placed in a <render> element.



If you want to build the component into the JavaScript bundle of your app you can do so easily, but you'll need to handle loading a WebComponents polyfill on your own.