[node小工具]node实现markdown实时预览[热加载]
发布于 6 年前 作者 zzzs 3270 次浏览 来自 分享

node小工具系列之node-markdown-preview: node实现markdown实时预览[热加载],自动打开浏览器。

github:https://github.com/zzzs/node-markdown-preview

实现

  • http模块提供推送服务和页面预览服务
  • 页面预览效果借鉴webpack的热加载,无需刷新,即消息推送使用HTML5 服务器发送事件(server-sent event)。当然也可以用websocket实现,但websocket是双向传输,相对较重。而SSE是单向传输(服务器向浏览器传输),很轻巧,和markdown预览可以说配合的相得益彰了。
  • markdown解析使用markdown-it实现
  • 自动打开浏览器使用opn实现,矫正了不同操作系统的调用浏览器命令的姿势

图解

1.png

效果

1 自动启动打开浏览器

1.gif

2 [热加载]实时预览

2.gif

3 回复

=。= 感觉一个命令行的 watch 加上 liver-server 就搞定了。

@MiYogurt 嗯,谢谢,应该能实现差不多的效果。只不过live-server基于ws,实现实时加载,即实时刷新页面,而本文这是基于sse无需刷新的,内容大的话交互应该更自然。其实这小功能的实现方式肯定有很多,自己只是想亲手实现下,尽量少用一些现成的模块。最后还是谢谢你的一个idea了 :)。

回到顶部