<img width="1106" alt="iShot_2024-04-01_22 30 10" src="https://github.com/ruanyf/weekly/assets/49330279/e93ea41c-232c-4df5-85a7-f068fe91c406">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_）都是可以执行的，它们的执行结果会被展示在文档中。每一个文档页面都实现了一个响应式系统，使得代码块之间可以相互引用，并且当一个代码块的值更新之后，所有依赖它的代码块会重新执行并渲染，从而实现文档的交互性。````mdjs eval code=falsesize = 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。