Open pearmini opened 3 weeks ago
项目地址:https://github.com/pearmini/genji
类别:JavaScript
项目标题:Markdown Genji:编写交互式文档的 Markdown 拓展,支持在 VitePress 中使用
项目描述:Markdown Genji 是一个 Markdown 语法的扩展,受到了 Observable Notebook 的启发,主要用来书写交互式文档,目前支持在 VitePress 中使用。在 Genji 中,所有指定了 eval 指令的代码块( ```js eval)都是可以执行的,它们的执行结果会被展示在文档中。每一个文档页面都实现了一个响应式系统,使得代码块之间可以相互引用,并且当一个代码块的值更新之后,所有依赖它的代码块会重新执行并渲染,从而实现文档的交互性。目前已经受到了 D3 作者 Mike Bostock 的认可。
亮点:
示例代码:如下的代码,可以得到下图中的结果:
```js eval code=false size = Inputs.range([50, 300], { label: "size", value: 100, step: 1 });
(() => { const div = document.createElement("div"); div.style.width = size + "px"; div.style.height = "100px"; div.style.background = "orange"; return div; })();
![Mar-29-2024 19-37-59](https://github.com/ruanyf/weekly/assets/49330279/e84d203b-ba0e-453a-a568-cd1d70313eca) - 截图:(可选)gif/png/jpg <img width="1106" alt="iShot_2024-04-01_22 30 10" src="https://github.com/ruanyf/weekly/assets/49330279/e93ea41c-232c-4df5-85a7-f068fe91c406"> <img width="924" alt="image" src="https://github.com/521xueweihan/HelloGitHub/assets/49330279/64663aae-30ef-4435-b69c-5565d5fd2da3"> - 后续更新计划: - 添加跟多语法层面的支持:比如内敛表达式等等。 - 在更多的 SSG 里面支持语法,比如 [Docusaurus](https://docusaurus.io/), [Nextra](https://nextra.site/), [Rspress](https://rspress.dev/) 。
推荐项目
项目地址:https://github.com/pearmini/genji
类别:JavaScript
项目标题:Markdown Genji:编写交互式文档的 Markdown 拓展,支持在 VitePress 中使用
项目描述:Markdown Genji 是一个 Markdown 语法的扩展,受到了 Observable Notebook 的启发,主要用来书写交互式文档,目前支持在 VitePress 中使用。在 Genji 中,所有指定了 eval 指令的代码块( ```js eval)都是可以执行的,它们的执行结果会被展示在文档中。每一个文档页面都实现了一个响应式系统,使得代码块之间可以相互引用,并且当一个代码块的值更新之后,所有依赖它的代码块会重新执行并渲染,从而实现文档的交互性。目前已经受到了 D3 作者 Mike Bostock 的认可。
亮点:
示例代码:如下的代码,可以得到下图中的结果: