https://github.com/mikeal/markdown-element

HTML Element that renders markdown content.
https://github.com/mikeal/markdown-element

Last synced: 5 months ago
JSON representation

HTML Element that renders markdown content.

• Host: GitHub
• URL: https://github.com/mikeal/markdown-element
• Owner: mikeal
• Created: 2017-09-28T06:04:08.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-09-03T02:17:14.000Z (almost 5 years ago)
• Last Synced: 2024-10-18T09:14:00.235Z (9 months ago)
• Language: JavaScript
• Size: 114 KB
• Stars: 140
• Watchers: 4
• Forks: 17
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Markdown Element

HTML Element for markdown content.



  

    

  



Usage:

```html

  

  

    ## h2

    * test

      * test2

    ```javascript

    let x = 'asdf'

    class Text {

      constructor() {

      }

    }

    ```

  

```

## 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:

```html

    # h1

    * test

```

```js

let marked = document.createElement('mark-down')

marked.noGFM = true

marked.smartyPants = true

document.body.appendChild(marked)

```

## Rendering

The rendered markdown is placed in a `` element.

```html

  

    
h1

    


      
test

    

  


```

### 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.