my blog
    • 前端-刘发狮-18727782912
    • 算法笔记,JavaScript实现
    • 开发中遇到的cookie问题
    • 发布-订阅设计模式
    • 柯里化和组合函数
    • 从 HTTP 1.0 到 HTTP 3.0
    • 使用node将你的学习笔记一键转化为markdown
    • 谈一谈前端开发中的惰性思想
    • web项目的灰度发布/金丝雀发布
    • 关于我的组件库 rain-ui
    • 搭建react脚手架,以及脚手架工具
    • unit-test
    • webpack优化指南

    使用node将你的学习笔记一键转化为markdown

    背景#

    最近在学习前端算法与数据结构的时候突然有一个想法,正常做练习算法题肯定是新建 js 文件,然后在文件中将算法题放在注释中像下图这样,{% gallery %}题目+代码{% endgallery %}
    然后我们就可以在终端中运行 js 代码。
    然后我本来是打算将这些题目刷完之后整理成 markdown 文件的,然后又觉得到时候题目太多肯定懒得整理。于是乎灵机一动,为什么不写一个自动转化的工具呢?
    先看下我的笔记的结构
    {% gallery %}目录{% endgallery %}
    我们可以使用 nodejs 的文件系统读取文件目录作为 markdown 的 h2~h6 标题,然后再将注释和代码替换成 markdown 的引用和代码块。
    先看效果 {% post_link algorithms %},这个文件就是转化得到的。
    然后这里是源码

    开始动手#

    处理文件(正则)#

    先定好不同的注释对应 md 文档的格式,后面写注释的收稍微注意一下就行。
    例如 //- ... 和 /_text ... _/ 直接转化为文本 /_quote ... _/ 转化为引用//```js ... //```转化为代码
    这个时候就需要我们多多了解正则的使用啦
    我们可以先试试有没有转化成功,随便读一个文件试试
    以下是 js 和 md
    {% gallery %}代码{% endgallery %}
    {% gallery %}生成的md{% endgallery %}
    可以发现基本没有什么问题啦

    处理目录#

    我们可以递归整个文件目录,然后如果是文件夹就继续向下遍历
    然后会生成一个这样的树状结构,避免太长把 file 中的内容去掉了,上面可以看到将 file 中的内容用上面的getContent方法处理过.

    渲染这个树结构#

    我采用深度优先的遍历方式,然后 level 控制标题层级 也就是#的数量

    最后写入结果#

    大功告成!
    然后在贴一下效果和源码
    先看效果 {% post_link algorithms %},这个文件就是转化得到的。
    然后这里是源码
    修改于 2025-05-17 06:30:10
    上一页
    从 HTTP 1.0 到 HTTP 3.0
    下一页
    谈一谈前端开发中的惰性思想
    Built with