Props

Props for the Layout component from genji-theme-vitpress.

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

const props = {
  Theme: DefaultTheme,
};

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

library

Specifies custom global variables and functions can be accessed in code blocks. For example, to use @observablehq/plot and a custom block function:

$ npm i @observablehq/plot

// .vitepress/theme/index.js
import * as Plot from "@observablehq/plot";

function block(color) {
  const div = document.createElement("div");
  div.style.width = "100px";
  div.style.height = "100px";
  div.style.background = color;
  return div;
}

const props = {
  library: {
    Plot,
    block,
  },
};

//...

Genji assigns the specified library to window, allowing you access Plot and block directly:

Plot.barY(
  [
    { genre: "Sports", sold: 275 },
    { genre: "Strategy", sold: 115 },
    { genre: "Action", sold: 120 },
    { genre: "Shooter", sold: 350 },
    { genre: "Other", sold: 150 },
  ],
  { x: "genre", y: "sold" }
).plot();

block("steelblue");

transform

Specifies the transforms to transform code in code blocks before executing. For example, to define a transform called py:

// .vitepress/theme/index.js
import * as Plot from "@observablehq/plot";

const props = {
  transform: {
    py(code) {
      return code.replace("print", "new Array");
    },
  },
};

Then set t directive of the code block to py:

```py eval t=py
print([1, 2, 3])
```

This produces:

print([1, 2, 3])

Theme

Specifies the Theme component to extends the Genji Markdown extension. In most of situations, you should extend the DefaultTheme of VitePress:

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

const props = {
  Theme: DefaultTheme,
};

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

It is also possible to extend other VitePress theme:

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

const props = {
  Theme: CustomTheme,
};

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