配置 Monaco

环境: client
此配置仅在客户端环境下运行。在引入包时,请确保浏览器的兼容性。

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

import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(async (monaco) => {
  // 使用 `monaco` 配置
})

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

用法

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

//```js
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 报错
//```

修改为

//```js {monaco}
const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 报错
//```

导出

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

---
monaco: true # 默认为 "dev"
---

类型自动安装

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

//```ts {monaco}
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'

const counter = ref(0)
//```

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

配置主题

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

// ./setup/monaco.ts
import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(() => {
  return {
    theme: {
      dark: 'vs-dark',
      light: 'vs',
    },
  }
})

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

import { defineMonacoSetup } from '@slidev/types'

// 改成你的主题
import dark from 'theme-vitesse/themes/vitesse-dark.json'
import light from 'theme-vitesse/themes/vitesse-light.json'

export default defineMonacoSetup((monaco) => {
  monaco.editor.defineTheme('vitesse-light', light as any)
  monaco.editor.defineTheme('vitesse-dark', dark as any)

  return {
    theme: {
      light: 'vitesse-light',
      dark: 'vitesse-dark',
    },
  }
})

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