配置 Monaco
环境: client
创建一份包含以下内容的 ./setup/monaco.ts
文件:
import { defineMonacoSetup } from '@slidev/types'
export default defineMonacoSetup(async (monaco) => {
// 使用 `monaco` 配置
})
访问 monaco-editor 了解更多关于 Monaco 配置的相关信息。
用法
如果你想在你的幻灯片中使用 Monaco, 只需添加 {monaco}
到你的代码片段中:
```js {monaco}
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // error
```
TypeScript Types
当你使用 Monaco 编写 TypeScript 时,类型依赖将会自动安装到客户端.
```ts {monaco}
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'
const counter = ref(0)
```
In the example above, make sure vue
and @vueuse/core
are installed locally as dependencies / devDependencies, Slidev will handle the rest to get the types working for the editor automatically. When deploy as SPA, those types will also be bundled for static hosting.
Additional Types
Slidev will scan all the monaco codeblocks in your slides and import the types for those used libraries for you. In case it missed some, you can explicitly specify extra packages to import the types for:
---
monacoTypesAdditionalPackages:
- lodash-es
- foo
---
Auto Type Acquisition
You can optionally switch to load types from CDN by setting the following headmatter:
---
monacoTypesSource: ata
---
This feature is powered by @typescript/ata
and runs completely on the client-side.
配置主题
Since v0.48.0, Monaco will reuse the Shiki theme you configured in Shiki's setup file, powered by @shikijs/monaco
. You don't need to worry about it anymore and it will have a consistent style with the rest of your code blocks.
Configure the Editor
Available since v0.43.0
If you would like to customize the Monaco editor you may pass an editorOptions
object that matches the Monaco IEditorOptions definition.
```ts {monaco} { editorOptions: { wordWrap:'on'} }
console.log('HelloWorld')
```
Alternatively if you would like these options to be applied to every Monaco instance, you can return them in the defineMonacoSetup
function
// ./setup/monaco.ts
import { defineMonacoSetup } from '@slidev/types'
export default defineMonacoSetup(() => {
return {
editorOptions: {
wordWrap: 'on'
}
}
})
Disabling
Since v0.48.0, Monaco editor is enabled by default and only be bundled when you use it. If you want to disable it, you can set monaco
to false
in the frontmatter of your slide:
---
monaco: false # can also be `dev` or `build` tp conditionally enable it
---