将Markdown代码块转换成可运行实例

之前在文章中插入示例DEMO是通过异步加载codepen来实现的,但是受制于网络条件,有时候加载缓慢,甚至无法加载。就想着将一些简单的示例直接在Markdown中写为HTML代码输出到前端页面运行,可是这样一来,不仅让Markdown失去了严谨性和优美性,而且如果不小心写了一个可能污染全局的样式或者脚本,那就翻船咯~
但是Markdown最终是要转换成HTML的,因此只要在Markdown的转换过程中做点手脚,再配合上Shadow DOM这个魔法盒子将示例代码运行在一个沙箱中,问题就能得到解决。

浏览器环境下的文件读写

群里有人问到如何通过纯前端的方式来读取本地文件再编辑后保存为新文件的问题。类似这种纯前端读写的方式正好在项目开发过程中遇到过,我们是读取一个Markdown文件的模板通过一些信息的修改(如版本,名称,日志)来为产品生产新的帮助文档。以前纯前端实现文件读写要借助于各种浏览器插件(如flash)或者只能寄托于后端,而现在HTML5强大的 File API规范,无疑让浏览器与本地文件的交互变的更加简单。本文将结合示例来演示如大文件读取,监控文件读取进度、大文件保存等的实现过程。