❤
npm
Sign UpSign In

markdown-element

2.0.2 • Public • Published

Markdown Element

HTML Element for markdown content.

Usage:

<body>
  <script src="https://cdn.jsdelivr.net/npm/markdown-element/dist/markdown-element.min.js"></script> 
  <mark-down>
    ## h2
 
    * test
      * test2
 
    ```javascript
    let x = 'asdf'
 
    class Text {
      constructor() {
 
      }
    }
    ```
  </mark-down>
</body>

Attributes/properties

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 markdown.pl 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.

Examples:

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

Rendering

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

<mark-down>
  <render>
    <h1>h1</h1>
    <ul>
      <li>test</li>
    </ul>
  </render>
</mark-down>

Bundling

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.

Readme

Keywords

none

Package Sidebar

Install

npm i markdown-element

Repository

github.com/mikeal/markdown-element

Homepage

github.com/mikeal/markdown-element#readme

Weekly Downloads

12

Version

2.0.2

License

Apache-2.0

Last publish

Collaborators

  • mikeal
Try on RunKit
Report malware