背景

在编写markdown 的时候， 一般我们写tsx 代码的时候在markdown中并不是很友好，是没有提示的， 此时，我们需要单独开一个ts 文件，通过某种方式引入并渲染成对应的内容

如何做

  • 确定指令, 例如 <<< ./snippets/install.bash

  • 用ast 分析markdown , 链接

  • 对 paragraph 节点进行处理，

    • 如果是以 <<< 开头的，那么记录并处理该节点
    • 如果不是，那么跳过该节点

  • 遍历需要处理的节点后，处理文件路径，补充绝对路径

    • 判断文件是否存在，如果是，那么读取文件内容
    • 不存在则跳过

  • 最后 ast 通过调用父节点修改当前子节点内容

avatar

进阶

我们引用文件时，可能只需要文件的部分内容，比如, 我们只需要用到#region snippet 包裹的内容

// #region snippet
function foo() {
  // ..
}
// #endregion snippet

export default foo;

<<< ./snippets/install.bash#snippet

那么我们只需要在 处理文件内容时, 进行节点查找/ 正则匹配即可

源码

仓库