node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

markdown-it-incremental-dom

markdown-it-incremental-dom

Travis CI Coveralls npm LICENSE

A markdown-it renderer plugin by using Incremental DOM.

Let's see key features: https://yhatt.github.io/markdown-it-incremental-dom/ or docs.md

Requirement

Examples

Node.js

const IncrementalDOM = require('incremental-dom')
 
const md = require('markdown-it')()
             .use(require('markdown-it-incremental-dom'), IncrementalDOM)
 
IncrementalDOM.patch(
  document.getElementById('target'),
  md.renderToIncrementalDOM('# Hello, Incremental DOM!')
)

Browser

Define as window.markdownitIncrementalDOM.

<!DOCTYPE HTML>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/incrementaldom/0.5.1/incremental-dom-min.js"></script> 
  <script src="https://cdn.jsdelivr.net/markdown-it/8.3.1/markdown-it.min.js"></script> 
  <script src="./node_modules/markdown-it-incremental-dom/dist/markdown-it-incremental-dom.min.js"></script> 
</head>
<body>
  <div id="target"></div>
 
  <script>
    var md = new markdownit().use(markdownitIncrementalDOM)
 
    IncrementalDOM.patch(
      document.getElementById('target'),
      md.renderToIncrementalDOM('# Hello, Incremental DOM!')
    )
  </script> 
</body>
</html>

CDN

You can use the recent version through CDN provides by unpkg.com.

Installation

We recommend using yarn to install.

$ yarn add markdown-it-incremental-dom

If you wanna use npm, try this:

$ npm install markdown-it-incremental-dom --save

Usage

When injecting this plugin by .use(), you should pass Incremental DOM class as second argument. (window.IncrementalDOM by default)

const IncrementalDOM = require('incremental-dom')
const md = require('markdown-it')()
             .use(require('markdown-it-incremental-dom'), IncrementalDOM)

If it is succeed, 2 new rendering methods would be injected to instance.

TIPS: This plugin keeps default rendering methods render() and renderInline().

Option

You can pass option object as third argument. See below:

require('markdown-it')()
  .use(require('markdown-it-incremental-dom'), IncrementalDOM, {
    incrementalizeDefaultRules: true
  })
  • incrementalizeDefaultRules: For better performance, this plugin would override a few default renderer rules only when you calls injected methods. If the other plugins that override default rules have occured any problem, You can disable overriding by setting false. (true by default)

Rendering methods

MarkdownIt.renderToIncrementalDOM(src[, env]) => Function

Similar to MarkdownIt.render(src[, env]) but it returns a function for Incremental DOM. It means doesn't render Markdown immediately.

You must render to DOM by using IncrementalDOM.patch(node, description). Please pass the returned function to the description argument. For example:

const node = document.getElementById('#target')
const func = md.renderToIncrementalDOM('# Hello, Incremental DOM!')
 
// It would render "<h1>Hello, Incremental DOM!</h1>" to <div id="target"> 
IncrementalDOM.patch(node, func)

MarkdownIt.renderInlineToIncrementalDOM(src[, env]) => Function

Similar to MarkdownIt.renderToIncrementalDOM but it wraps MarkdownIt.renderInline(src[, env]).

Development

$ git clone https://github.com/yhatt/markdown-it-incremental-dom
 
$ yarn install
$ yarn build

Publish to npm

$ npm publish

⚠️ CAUTION: You should not use yarn publish when you would publish to npm. It would cause publishing wrong / empty build because the building process on prepublish will run after packaging.

Author

Yuki Hattori (@yhatt)

License

This plugin releases under the MIT License.