# Fumadocs Core (the core library of Fumadocs): Remark TS 轉 JS
URL: /zh-TW/docs/headless/mdx/remark-ts2js
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/mdx/remark-ts2js.zh-TW.mdx

一個 remark 外掛，可將 TypeScript 程式碼區塊轉換為兩個頁籤，分別呈現 TypeScript 與對應的 JavaScript 版本。

## 使用方式 [#usage]

安裝相依套件：

```package-install tab="unified"
fumadocs-docgen
```

```package-install tab="Sätteri"
@fumadocs/satteri
```

Remark TS 轉 JS 是一個 remark 外掛，請將它加入您的設定中：

```ts tab="unified" title="source.config.ts"
import { remarkTypeScriptToJavaScript } from 'fumadocs-docgen/remark-ts2js';
import { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkPlugins: [remarkTypeScriptToJavaScript],
  },
});
```

```ts tab="Sätteri" title="source.config.ts"
import { remarkTs2js } from '@fumadocs/satteri/remark-ts2js';
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  docs: { compiler: 'satteri' },
});

export default defineConfig({
  satteriOptions: {
    mdastPlugins: [remarkTs2js()],
  },
});
```

它會產生與 [Remark NPM](/docs/headless/mdx/remark-npm#usage) 相同的 `CodeBlockTabs` 元件，Fumadocs UI 已預設內建這些元件。

現在您可以在 TypeScript/TSX 程式碼區塊上啟用它，例如：

````md
```tsx ts2js
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}
```
````

```tsx ts2js
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}
```