Getting started

Currently Genji can be used in VitePress via the custom theme: genji-theme-vitepress.

Future Work

There are plans to develop additional Genji themes and plugins for other SSGs in the future, such as Docusaurus, Nextra, Rspress and more.

Try Genji online

You can try VitePress and Genji directly in your browser on StackBlitz.

Installing from NPM

First, you should install VitePress and create a basic project following the instructions in the Getting Started section of the VitePress official guide.

Then install genji-theme-vitepress from NPM:

$ npm install genji-theme-vitepress

To consume genji-theme-vitpress, override the default Layout component from the chosen theme:

// .vitepress/theme/index.js
import DefaultTheme from "vitepress/theme";
import Layout from "genji-theme-vitepress";
import { h } from "vue";

// More props: https://genji-md.dev/reference/props
const props = {
  Theme: DefaultTheme,
};

export default {
  extends: DefaultTheme,
  Layout: () => h(Layout, props),
};

Genji also requires special VitePress config, extend it in the config:

// .vitepress/config.js
import config from "genji-theme-vitepress/config";

export default {
  extends: config,
};

With other Markdown plugins ^0.2.1

If you are working with other Markdown plugins, you should register Markdown plugin genjiAttrs explicitly:

// .vitepress/config.js
import { genjiAttrs } from "genji-theme-vitepress/config";
import otherMarkdownPlugin from "other-markdown-plugin";

export default {
  extends: config,
  markdown: {
    config: (md) => {
      md.use(otherMarkdownPlugin);
      md.use(genjiAttrs);
    },
  },
};

A quick example

If everything goes where, insert the following code snippet into one of your Markdown files, excluding index.md:

```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:

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