markdown-it-incremental-dom
Advanced tools
markdown-it renderer plugin by using 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
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!')
)
Define as window.markdownitIncrementalDOM.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/incremental-dom@0.6.0/dist/incremental-dom-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it@8.4.2/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>
You can use the recent version through CDN provides by jsDelivr.
<script src="https://cdn.jsdelivr.net/npm/markdown-it-incremental-dom@2/dist/markdown-it-incremental-dom.min.js"></script>
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
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().
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 setting false. (true by default)MarkdownIt.renderToIncrementalDOM(src[, env]) => FunctionSimilar 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]) => FunctionSimilar to MarkdownIt.renderToIncrementalDOM but it wraps MarkdownIt.renderInline(src[, env]).
MarkdownIt.IncrementalDOMRenderer => RendererReturns 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)
$ git clone https://github.com/yhatt/markdown-it-incremental-dom
$ yarn install
$ yarn build
$ yarn lint # Run ESLint
$ yarn lint --fix # Fix lint
$ yarn format:check # Run Prettier
$ yarn format --write # Fix formatting by Prettier
$ npm publish
:warning: Use npm >= 5.0.0.
Yuki Hattori (@yhatt)
This plugin releases under the MIT License.
FAQs
markdown-it renderer plugin by using Incremental DOM.
We found that markdown-it-incremental-dom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.