多端同步即时预览Markdown文件

预览方式

vscode等ide自带的或者安装插件后的预览


readme_vscode.gif

类似gitbook,typora等及时预览


readme_gitbook.gif

个人是不习惯用上面两种方式

效果图

readme6.gif

在编写readme过程中 只要保存修改 就会及时显示在浏览器中预览,通过热更新的方式。

用法

因为已经发布到npm上面,所以可以通过npm i dg-mp或者yarn add dg-mp安装
然后在package.json中添加scripts

"scripts": {
  "dg-mp": "dg-mp"
}

最后在命令行中输入npm run dg-mp或者yarn dg-mp会自动打开浏览器。
默认监听 4000端口 可以通过 npm run dg-mp 4001修改监听端口

原理

通过检测文件的修改,由EventSource方式通知页面更新dom。

修复bug记录

  • v1.0.2:修复windows下读取文件为空的bug

  • v1.0.3:模版文件名称修改,可自定义模版文件放在项目根目录下,模版名称_dgmp_template.html(后续版本会继续更新)

github地址

md-preview 热更新版本

你可能感兴趣的:(多端同步即时预览Markdown文件)