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 = text// => 'abcd\n\n<p class="detected-updated" style="">\n\n# new\n\n</p>\n'
const detectMarkdown = const remark = const html = // => '<p>abcd</p>\n<h1 class="detected-updated">new</h1>\n'
const detectHtml = 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: truemodule:rules:test: /\.md$/use:processenvNODE_ENV !== 'production' &&name: 'detect-one-changed/md-loader'options: returnType: 'text'// { name: 'some-md-to-html-loader' },// ... -
Step two (set up HMR in browser)
{documentinnerHTML =}if modulehotmodulehotaccept'./path/to/some.md' {// Injects highlight css text in <style/>const node = documentif node// Scroll to updated nodenode} -
Step three
npm install webpack webpack-dev-server -D
webpack-dev-server
MDX
Use inwebpack.config.js
...use: /\.mdx?$/loaders:name: '@mdx-js/mdx-loader'options:mdPlugin:
-
src/index.js
(entry){const Markdown = default}if modulehot && processenvNODE_ENV !== 'production'modulehotaccept'./markdown.mdx' {const node = documentif nodenode}
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, moyuyc95@gmail.com.
License
MIT - imcuttle 🐟