Props

Props to configure Markdown Genji:

• For 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),
};

• For Docusaurus:

// genji.config.js
import { defineConfig } from "genji-theme-docusaurus/config";

export default defineConfig({});

WARNING

If you want to import some modules with side effects for Docusaurus, such as accessing some global variables in browser, you need to check the execution environment before accessing client-side globals.

For example, to import a module which listens keydown event:

// keydown.js
window.addEventListener("keydown", (e) => {
  if (e.code === "Period") {
    location.assign(location.href.replace(".com", ".dev"));
  }
});

export default function () {
  window.dispatchEvent(new Event("keydown", { code: "Period" }));
}

You should use require instead of import:

// genji.config.js
import { defineConfig } from "genji-theme-docusaurus/config";
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";

const keydown = ExecutionEnvironment.canUseDOM
  ? require("./keydown.js")
  : () => {};

export default defineConfig({
  library: {
    keydown,
  },
});

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

• For VitePress:

// .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,
  },
};

//...

• For Docusaurus:

// genji.config.js
import { defineConfig } from "genji-theme-docusaurus/config";
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;
}

export default defineConfig({
  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:

• For VitePress:

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

• For Docusaurus:

// genji.config.js
import { defineConfig } from "genji-theme-docusaurus/config";

export default defineConfig({
  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

For VitePress only.

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