markdown-it-incremental-dom
Advanced tools
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
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!')
)
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>
You can use the recent version through CDN provides by unpkg.com.
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)
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()andrenderInline().
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)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]).
$ git clone https://github.com/yhatt/markdown-it-incremental-dom
$ yarn install
$ yarn build
$ yarn lint # Run ESLint and Prettier to JS
$ yarn lint --fix # Fix lint and formatting of JS
$ yarn format:check # Run Prettier to Markdown, JSON and CSS
$ yarn format --write # Fix formatting by Prettier
$ yarn publish
:warning: Use yarn >= 1.0.0 or npm >= 5.0.0.
Yuki Hattori (@yhatt)
This plugin releases under the MIT License.
v1.1.1 - 2018-01-06
FAQs
markdown-it renderer plugin by using Incremental DOM.
The npm package markdown-it-incremental-dom receives a total of 285 weekly downloads. As such, markdown-it-incremental-dom popularity was classified as not popular.
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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
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.