多端同步即时预览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 热更新版本

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 肯定法: 1、结束学习回到家里,看到前两天的脏衣服都干净的整齐叠叠放整齐衣柜里,我问老公“衣服你帮我洗了?”他说 ...
    爱眉小札夏大宝阅读 156评论 0 1
  • 太关注某样东西,太想得到它的话,难免会有过高的期望,若是事情未达到预定期望,便会把目光都集中在得不到的那一点点上,...
    lifengping阅读 236评论 0 2
  • 那年未脱去稚气,带着一股的懵懂与求知的内心来到这四四方方的教室,当时的我们谁也不认识谁,相遇于这里,相知于三年后。...
    一条游鱼阅读 228评论 0 0
  • 昨天看到一个背影特别像你,心里一惊,忍不住回头看了几眼,车开的很快,只有几秒钟这个背影就消失在我的视线里。...
    翻落阅读 136评论 0 1
  • 林兮一打开更衣室的门就看到一群小年轻趴在窗户边。 “看啥呢,衣服也不换,你们不打算上班呐?” “兮姐,快过来。” ...
    半晌花开阅读 422评论 0 0