markdown-element

HTML Element for markdown content.

latest

Source

npm

Version: 2.0.2

Version published: 8 years ago

Maintainers: 1

Created: 8 years ago

Source

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.

FAQs

What is markdown-element?

Is markdown-element well maintained?

Package last updated on 15 Oct 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install