【开源自荐】Markdown Genji：编写交互式文档的 Markdown 拓展，支持在 VitePress 中使用

[pearmini]

推荐项目

• 项目地址：https://github.com/pearmini/genji

• 类别：JavaScript

• 项目标题：Markdown Genji：编写交互式文档的 Markdown 拓展，支持在 VitePress 中使用

• 项目描述：Markdown Genji 是一个 Markdown 语法的扩展，受到了 Observable Notebook 的启发，主要用来书写交互式文档，目前支持在 VitePress 中使用。在 Genji 中，所有指定了 eval 指令的代码块（ ```js eval）都是可以执行的，它们的执行结果会被展示在文档中。每一个文档页面都实现了一个响应式系统，使得代码块之间可以相互引用，并且当一个代码块的值更新之后，所有依赖它的代码块会重新执行并渲染，从而实现文档的交互性。目前已经受到了 D3 作者 Mike Bostock 的认可。

• 亮点：

  • 轻量：不像直接在文档里面嵌入一个 CodeSandbox 那样在视觉上和功能上引入额外的负担。
  • 简单：虽然大部分 SSGs 通过支持直接在 Markdown 里面写 React 和 Vue 组建的方式也达到了类似“可执行代码”的效果，但是有不低的学习成本（需要学习 React/Vue 组件），同时也需要把 Plain JavaScript 代码包装进组件，引入额外代码。而 Genji 的语法是跨框架的，使用起来也更加简单。
  • 扩展性强：Genji 不只能执行 JavaScript 代码，Genji 中的 transform 机制，可以很方便的在代码块执行前，把 TypeScript、Vue、React、Python 等转换成 Plain JavaScript。

• 示例代码：如下的代码，可以得到下图中的结果：

```js eval code=false
size = Inputs.range([50, 300], { label: "size", value: 100, step: 1 });
```

```js eval
(() => {
  const div = document.createElement("div");
  div.style.width = size + "px";
  div.style.height = "100px";
  div.style.background = "orange";
  return div;
})();
```

• 截图：（可选）gif/png/jpg

• 后续更新计划：
  • 添加跟多语法层面的支持：比如内敛表达式等等。
  • 在更多的 SSG 里面支持语法，比如 Docusaurus, Nextra, Rspress 。