转译

有时您有一个代码块，希望将其与不同语言的版本一起显示。可能是 TypeScript 和 JavaScript，或者 Sass 和 CSS，或者您可能想要将 cURL 命令转换为不同语言的 SDK 调用。

如果您使用 React 服务器组件并且有一个转译代码的函数，您可以在组件内部调用该函数。

以下是一个示例，展示如何将 TypeScript 代码块转译为 JavaScript，然后在标签页中显示两个版本：

content.md

```ts
interface Greeter {
  greet(): string
}

function sayHello(greeter: Greeter) {
  console.log(greeter.greet())
}
```

interface Greeter {
  greet(): string
}

function sayHello(greeter: Greeter) {
  console.log(greeter.greet())
}

Implementation

code.tsx

import { RawCode } from "codehike/code"
// CodeTabs is the component from the tabs example
import { CodeTabs } from "@/components/tabs"
import ts from "typescript"

async function Code({ codeblock }: { codeblock: RawCode }) {
  // 由于这是一个 RSC，我们可以在这里转译代码
  // （可能有更高效的方法来做这件事）
  const result = ts.transpileModule(codeblock.value, {
    compilerOptions: {
      module: ts.ModuleKind.CommonJS,
      target: ts.ScriptTarget.ESNext,
    },
  })

  const tsCode = {
    ...codeblock,
    meta: "typescript",
  }
  const jsCode = {
    ...codeblock,
    value: result.outputText,
    lang: "js",
    meta: "javascript",
  }

  return <CodeTabs tabs={[tsCode, jsCode]} />
}