genji-theme-vitepress: A custom VitePress theme for interactive documents like Observable Notebooks

[pearmini]

Hi there! 👋 Congratulations on the earlier release of v1.0.0 on Mar 21! I'm here to share one of my recent open-source projects: Markdown Genji, the Markdown extension for interactive documents, which is now available for VitePress through a custom theme: genji-theme-vitepress.

Markdown Genji adapting concepts from Observable notebooks into static site generators and the founder of Observable has said he likes it! With the Genji theme, every code block in VitePress is executable and can reference others via a reactive system. For example, given the following Markdown:

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

This produces:

Compared to the built-in support for Vue components in Markdown, Genji is easier to get started with because it is just plain JavaScript. Genji is suitable to writing some interactive API documentation, data reports and tutorials.

Thanks to the great design of VitePress's APIs, the adaptation process was surprisingly easy. I hope you guys love genji-theme-vitepress and thanks again for the great work that VitePress tem has done.