title: 配置 Monaco

配置 Monaco {#configure-monaco}

创建一份包含以下内容的 ./setup/monaco.ts 文件：

  1. import { defineMonacoSetup } from '@slidev/types'
  3. export default defineMonacoSetup(async (monaco) => {
  4.   // 使用 `monaco` 配置
  5. })

访问 monaco-editor 了解更多关于 Monaco 配置的相关信息。

用法 {#usage}

如果你想在你的幻灯片中使用 Monaco， 只需添加 {monaco} 到你的代码片段中：

  1. //```js
  2. const count = ref(1)
  3. const plusOne = computed(() => count.value + 1)
  5. console.log(plusOne.value) // 2
  7. plusOne.value++ // 报错
  8. //```

修改为

  1. //```js {monaco}
  2. const count = ref(1)
  3. const plusOne = computed(() => count.value + 1)
  5. console.log(plusOne.value) // 2
  7. plusOne.value++ // 报错
  8. //```

导出 {#exporting}

默认情况下， Monaco 只会在开发模式开启。如果你想在导出的单页应用中使用，你需要配置你的扉页：

  1. ---
  2. monaco: true # 默认为 "dev"
  3. ---

类型自动安装 {#types-auto-installing}

当你使用 Monaco 编写 TypeScript 时，类型依赖将会自动安装到客户端.

  1. //```ts {monaco}
  2. import { ref } from 'vue'
  3. import { useMouse } from '@vueuse/core'
  5. const counter = ref(0)
  6. //```

在上面的示例中，只需确保项目依赖（dependencies 或 devDependencies）中包含所用到的 vue 和 @vueuse/core，Slidev 将处理剩余的部分以使你的 Monaco 编辑器获得正确的类型支持。

配置主题 {#configure-themes}

Monaco 主题受 Slidev 的亮色/暗色主题控制。如果你想定制主题，可以在配置函数中传入主题 id：

  1. // ./setup/monaco.ts
  2. import { defineMonacoSetup } from '@slidev/types'
  4. export default defineMonacoSetup(() => {
  5.   return {
  6.     theme: {
  7.       dark: 'vs-dark',
  8.       light: 'vs',
  9.     },
  10.   }
  11. })

如果你想载入自定义主题：

  1. import { defineMonacoSetup } from '@slidev/types'
  3. // 改成你的主题
  4. import dark from 'theme-vitesse/themes/vitesse-dark.json'
  5. import light from 'theme-vitesse/themes/vitesse-light.json'
  7. export default defineMonacoSetup((monaco) => {
  8.   monaco.editor.defineTheme('vitesse-light', light as any)
  9.   monaco.editor.defineTheme('vitesse-dark', dark as any)
  11.   return {
  12.     theme: {
  13.       light: 'vitesse-light',
  14.       dark: 'vitesse-dark',
  15.     },
  16.   }
  17. })

如果你在创建一个 Slidev 主题，在配置函数中使用动态 import() 以获得更好的 tree-shaking 和代码分割结果。