Code Switcher

TIP

Inspired by vuepress-plugin-code-switcher (opens new window).

Quick Start

• Input

<CodeSwitcher :languages="{ js: 'JavaScript', ts: 'TypeScript' }">
<template v-slot:js>

```js
module.exports = function (str) {
  return typeof str === "string" && str.trim() === str;
};
```

</template>
<template v-slot:ts>

```ts
export default function isString(str: string): str is string {
  return typeof str === "string" && str.trim() === str;
}
```

</template>
</CodeSwitcher>

• Output:

• JavaScript
• TypeScript

module.exports = function (str) {
  return typeof str === "string" && str.trim() === str;
};

export default function isString(str: string): str is string {
  return typeof str === "string" && str.trim() === str;
}

Custom Groups

Define Groups

// .vuepress/config.ts
import { ThemeConfig } from "vuepress-theme-vt";
import { defineConfig4CustomTheme } from "vuepress/config";

export = defineConfig4CustomTheme<ThemeConfig>({
  theme: "vt",
  themeConfig: {
    codeSwitcher: {
      groups: {
        default: { ts: "TypeScript", js: "JavaScript" },
        "plugin-usage": { tuple: "Tuple", object: "Object" },
      },
    },
  },
});

Using Groups

• Input:

<CodeSwitcher name="plugin-usage">
<template v-slot:tuple>

```ts
module.exports = {
  plugins: [
    [
      "vuepress-plugin-xxx",
      {
        /* options */
      },
    ],
  ],
};
```

</template>
<template v-slot:object>

```ts
module.exports = {
  plugins: {
    xxx: {
      /* options */
    },
  },
};
```

</template>
</CodeSwitcher>

• Output:

• Tuple
• Object

module.exports = {
  plugins: [
    [
      "foo",
      {
        /* options */
      },
    ],
  ],
};

module.exports = {
  plugins: {
    foo: {
      /* options */
    },
  },
};