vitepress-plugin-detype

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

This plugin uses detype to transform TypeScript to JavaScript.

Installation

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.

// .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/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

```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)
}
```

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

```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)
}
```

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.