yhatt / Markdown It Incremental Dom
Programming Languages
Labels
Projects that are alternatives of or similar to Markdown It Incremental Dom
markdown-it-incremental-dom
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
- markdown-it >= 4.0.0 (Recommend latest version >= 8.4.0, that this plugin use it)
- Incremental DOM >= 0.5.x
Examples
Node
import * as IncrementalDOM from 'incremental-dom'
import MarkdownIt from 'markdown-it'
import MarkdownItIncrementalDOM from 'markdown-it-incremental-dom'
const md = new MarkdownIt().use(MarkdownItIncrementalDOM, IncrementalDOM)
IncrementalDOM.patch(
document.getElementById('target'),
md.renderToIncrementalDOM('# Hello, Incremental DOM!')
)
Browser
Define as window.markdownitIncrementalDOM.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/incremental-dom-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/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>
const md = 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 jsDelivr.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-incremental-dom.min.js"></script>
Installation
We recommend using yarn to install.
$ yarn add incremental-dom markdown-it
$ yarn add markdown-it-incremental-dom
If you wanna use npm, try this:
$ npm install incremental-dom markdown-it --save
$ 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)
import * as IncrementalDOM from 'incremental-dom'
import MarkdownIt from 'markdown-it'
import MarkdownItIncrementalDOM from 'markdown-it-incremental-dom'
const md = new MarkdownIt().use(MarkdownItIncrementalDOM, IncrementalDOM)
If it is succeed, 2 new rendering methods would be injected to instance.
TIPS: This plugin keeps default rendering methods
render()andrenderInline().
Option
You can pass option object as third argument. See below:
new MarkdownIt().use(MarkdownItIncrementalDOM, IncrementalDOM, {
incrementalizeDefaultRules: false,
})
-
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 occurred any problem, You can disable overriding by settingfalse. (trueby 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]).
Renderer property
get MarkdownIt.IncrementalDOMRenderer => Renderer
Returns Renderer instance that includes Incremental DOM support.
It will inject Incremental DOM features into the current state of MarkdownIt.renderer at getting this property.
NOTE: This property is provided for the expert. Normally you should use
renderToIncrementalDOM().But it might be useful if you have to parse Markdown and operate tokens manually.
const md = new MarkdownIt() const tokens = md.parse('# Hello') // ...You can operate tokens here... const patch = md.IncrementalDOMRenderer.render(tokens, md.options) IncrementalDOM.patch(document.body, patch)
Development
$ git clone https://github.com/yhatt/markdown-it-incremental-dom
$ yarn install
$ yarn build
Lint & Format
$ yarn lint # Run ESLint
$ yarn lint --fix # Fix lint
$ yarn format:check # Run Prettier
$ yarn format --write # Fix formatting by Prettier
Publish to npm
$ npm publish
⚠️ Use npm >= 5.0.0.
Author
Yuki Hattori (@yhatt)
License
This plugin releases under the MIT License.