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

[pearmini]

Markdown Genji 是一个 Markdown 语法的扩展，受到了 Observable Notebook 的启发，主要用来书写交互式文档，目前支持在 VitePress 中使用。

• 官网：https://genji-md.dev/
• Github: https://github.com/pearmini/genji
• 特性：https://genji-md.dev/what-is-genji
• 动机：https://genji-md.dev/why-genji
• 案例：https://genji-md.dev/examples/athletes-visualization
• 在线体验：https://stackblitz.com/edit/vite-p5brzc?file=package.json

在 Genji 中，所有指定了 eval 指令的代码块（ ```js eval）都是可以执行的，它们的执行结果会被展示在文档中。每一个文档页面都实现了一个响应式系统，使得代码块之间可以相互引用，并且当一个代码块的值更新之后，所有依赖它的代码块会重新执行并渲染，从而实现文档的交互性。

```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;
})();
```

上面的 Markdown 片段的渲染结果如下：

Genji 很适合用于交互式 API 文档、数据报告和互动式教程等。一方面是它的轻量级，不像直接在文档里面嵌入一个 CodeSandbox 那样在视觉上和功能上引入额外的负担。另一方面是它的简单性，虽然大部分 SSGs 通过支持直接在 Markdown 里面写 React 和 Vue 组建的方式也达到了类似“可执行代码”的效果，但是有不低的学习成本（需要学习 React/Vue 组件），同时也需要把 Plain JavaScript 代码包装进组件，引入额外代码。当然这并不意味着 Genji 只能执行 JavaScript 代码，Genji 中的 transform 机制，可以很方便的在代码块执行前，把 TypeScript、Vue、React、Python 等转换成 Plain JavaScript。