Vitepress Plugins

Appearance

vitepress-plugin-detype ​

A plugin that adds syntax for generating js from ts code snippet.

NPM version

This plugin uses detype to transform TypeScript to JavaScript.

Installation ​

sh
npm i -D vitepress-plugin-detype vitepress-plugin-tabs
npm i -D vitepress-plugin-detype vitepress-plugin-tabs

vitepress-plugin-detype requires vitepress-plugin-tabs to be installed.

Usage ​

After installing the plugin, you'll need to edit both App Config and Theme Config.

ts
// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { createDetypePlugin } from 'vitepress-plugin-detype'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'

const { detypeMarkdownPlugin, detypeVitePlugin } = createDetypePlugin()

export default defineConfig({
  markdown: {
    config(md) {
      md.use(tabsMarkdownPlugin)
      md.use(detypeMarkdownPlugin)
    }
  },
  vite: {
    plugins: [detypeVitePlugin()]
  }
})
// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { createDetypePlugin } from 'vitepress-plugin-detype'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'

const { detypeMarkdownPlugin, detypeVitePlugin } = createDetypePlugin()

export default defineConfig({
  markdown: {
    config(md) {
      md.use(tabsMarkdownPlugin)
      md.use(detypeMarkdownPlugin)
    }
  },
  vite: {
    plugins: [detypeVitePlugin()]
  }
})
ts
// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    enhanceAppWithTabs(app)
  }
} satisfies Theme
// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    enhanceAppWithTabs(app)
  }
} satisfies Theme

Syntax ​

Simple ​

md
```ts,=detype=
type Foo = {
  foo: string
}

const fooList: Foo[] = []
for (let i = 0; i < 100; i++) {
  const f = { foo: '' + i }
  fooList.push(f)

  const f2 = { bar: '' }
  // @ts-expect-error ignore!
  fooList.push(f2)
}
```
```ts,=detype=
type Foo = {
  foo: string
}

const fooList: Foo[] = []
for (let i = 0; i < 100; i++) {
  const f = { foo: '' + i }
  fooList.push(f)

  const f2 = { bar: '' }
  // @ts-expect-error ignore!
  fooList.push(f2)
}
```
ts
type Foo = {
  foo: string;
};

const fooList: Foo[] = [];
for (let i = 0; i < 100; i++) {
  const f = { foo: "" + i };
  fooList.push(f);

  const f2 = { bar: "" };
  // @ts-expect-error ignore!
  fooList.push(f2);
}
type Foo = {
  foo: string;
};

const fooList: Foo[] = [];
for (let i = 0; i < 100; i++) {
  const f = { foo: "" + i };
  fooList.push(f);

  const f2 = { bar: "" };
  // @ts-expect-error ignore!
  fooList.push(f2);
}

This example uses ts but you can also use tsx and vue.

With highlight line ​

md
```ts{1-3,5},=detype{1}=
type Foo = {
  foo: string
}

const fooList: Foo[] = []
for (let i = 0; i < 100; i++) {
  const f = { foo: '' + i }
  fooList.push(f)

  const f2 = { bar: '' }
  // @ts-expect-error ignore!
  fooList.push(f2)
}
```
```ts{1-3,5},=detype{1}=
type Foo = {
  foo: string
}

const fooList: Foo[] = []
for (let i = 0; i < 100; i++) {
  const f = { foo: '' + i }
  fooList.push(f)

  const f2 = { bar: '' }
  // @ts-expect-error ignore!
  fooList.push(f2)
}
```
ts
type Foo = {
  foo: string;
};

const fooList: Foo[] = [];
for (let i = 0; i < 100; i++) {
  const f = { foo: "" + i };
  fooList.push(f);

  const f2 = { bar: "" };
  // @ts-expect-error ignore!
  fooList.push(f2);
}
type Foo = {
  foo: string;
};

const fooList: Foo[] = [];
for (let i = 0; i < 100; i++) {
  const f = { foo: "" + i };
  fooList.push(f);

  const f2 = { bar: "" };
  // @ts-expect-error ignore!
  fooList.push(f2);
}

You could use magic comments, too.