detect-one-changed
v2.1.2
Published
Detect first changed html and markdown between old text and the new
Downloads
55
Maintainers
Readme
detect-one-changed
Detect first changed html and markdown between old text and the new
Table of Contents
Installation
npm install detect-one-changed
# or use yarn
yarn add detect-one-changed
Usage
Use it as an package
const { detectMarkdown } = require('detect-one-changed')
detectMarkdown('abcd\n\n# old', 'abcd\n\n# new').text
// => 'abcd\n\n<p class="detected-updated" style="">\n\n# new\n\n</p>\n'
const { detectMarkdown } = require('detect-one-changed')
const remark = require('remark')
const html = require('remark-html')
remark()
.use(html)
.stringify(detectMarkdown('abcd\n\n# old', 'abcd\n\n# new', { wrapType: 'ast' }).ast)
// => '<p>abcd</p>\n<h1 class="detected-updated">new</h1>\n'
const { detectHtml } = require('detect-one-changed')
detectHtml('<p>old</p>', '<p class="new-cls">new</p>').text
// => '<p class="detected-updated new-cls">new</p>'
Use it as webpack loader
More information please see loader's document and webpack example
Step one: (
webpack.config.js
)// ... devServer: { hot: true }, module: { rules: [ { test: /\.md$/, use: [ process.env.NODE_ENV !== 'production' && { name: 'detect-one-changed/md-loader', options: { returnType: 'text' } } // { name: 'some-md-to-html-loader' }, ].filter(Boolean) } ] } // ...
Step two (set up HMR in browser)
function start() { document.querySelector('.markdown-body').innerHTML = require('./path/to/some.md') } if (module.hot) { module.hot.accept('./path/to/some.md', () => { // Injects highlight css text in <style/> require('!style-loader!css-loader!detect-one-changed/style.css') start() const node = document.querySelector('.markdown-body .detected-updated') if (node) { // Scroll to updated node node.scrollIntoView({ behavior: 'smooth' }) } }) }
Step three
npm install webpack webpack-dev-server -D
webpack-dev-server
Use in MDX
webpack.config.js
... { use: /\.mdx?$/, loaders: [ { name: '@mdx-js/mdx-loader', options: { mdPlugin: [require('detect-one-changed/remark-plugin')] } } ] }
src/index.js
(entry)import * as React from 'react' import { render } from 'react-dom' function start() { const Markdown = require('./markdown.mdx').default render(<Markdown />, document.querySelector('.markdown-body')) } start() if (module.hot && process.env.NODE_ENV !== 'production') { module.hot.accept(['./markdown.mdx'], () => { require('!style-loader!css-loader!detect-one-changed/style.css') start() const node = document.querySelector('.detected-updated') if (node) { node.scrollIntoView({ behavior: 'smooth' }) } }) }
API
Related
- live-markd - 📝Github Favorite Markdown preview with live rendering & location and highlight changed block.
Contributing
- Fork it!
- Create your new branch:
git checkout -b feature-new
orgit checkout -b fix-which-bug
- Start your magic work now
- Make sure npm test passes
- Commit your changes:
git commit -am 'feat: some description (close #123)'
orgit commit -am 'fix: some description (fix #123)'
- Push to the branch:
git push
- Submit a pull request :)
Authors
This library is written and maintained by imcuttle, [email protected].
License
MIT - imcuttle 🐟