config-monaco.md - slidev

config-monaco.md

1	# Configure Monaco
2
3	<Environment type="client" />
4
5	Create `./setup/monaco.ts` with the following content:
6
7	```ts twoslash [./setup/monaco.ts]
8	import { defineMonacoSetup } from '@slidev/types'
9
10	export default defineMonacoSetup(async (monaco) => {
11	// use `monaco` to configure
12	})
13	```
14
15	Learn more about [configuring Monaco](https://github.com/Microsoft/monaco-editor).
16
17	## TypeScript Types
18
19	When using TypeScript with Monaco, types for dependencies will be installed to the client-side automatically.
20
21	````md
22	```ts {monaco}
23	import { ref } from 'vue'
24	import { useMouse } from '@vueuse/core'
25
26	const counter = ref(0)
27	```
28	````
29
30	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 deployed as SPA, those types will also be bundled for static hosting.
31
32	### Additional Types
33
34	Slidev will scan all the Monaco code blocks 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:
35
36	```md
37	---
38	monacoTypesAdditionalPackages:
39	- lodash-es
40	- foo
41	---
42	```
43
44	### Auto Type Acquisition
45
46	You can optionally switch to load types from CDN by setting the following headmatter:
47
48	```md
49	---
50	monacoTypesSource: ata
51	---
52	```
53
54	This feature is powered by [`@typescript/ata`](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata) and runs completely on the client-side.
55
56	## Configure Themes
57
58	Since v0.48.0, Monaco will reuse the Shiki theme you configured in [Shiki's setup file](/custom/config-highlighter#configure-shiki), powered by [`@shikijs/monaco`](https://shiki.style/packages/monaco). You don't need to worry about it anymore and it will have a consistent style with the rest of your code blocks.
59
60	## Configure the Editor
61
62	> Available since v0.43.0
63
64	If you would like to customize the Monaco editor you may pass an `editorOptions` object that matches the [Monaco IEditorOptions](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOptions.html) definition.
65
66	````md
67	```ts {monaco} { editorOptions: { wordWrap:'on'} }
68	console.log('HelloWorld')
69	```
70	````
71
72	Alternatively if you would like these options to be applied to every Monaco instance, you can return them in the `defineMonacoSetup` function
73
74	```ts twoslash [./setup/monaco.ts]
75	import { defineMonacoSetup } from '@slidev/types'
76
77	export default defineMonacoSetup(() => {
78	return {
79	editorOptions: {
80	wordWrap: 'on'
81	}
82	}
83	})
84	```
85
86	## Disabling
87
88	Since v0.48.0, the 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:
89
90	```yaml
91	---
92	monaco: false # can also be `dev` or `build` to conditionally enable it
93	---
94	```
95
96	## Strict Mode {#strict-mode}
97
98	> Available since v0.52.0
99
100	By default, Monaco runnable code executes in strict mode (`"use strict"`). You can disable this if your code relies on non-strict mode behavior:
101
102	```yaml
103	---
104	monacoRunUseStrict: false
105	---
106	```
107
108	## Configure Code Runners
109
110	To configure how the Monaco Runner runs the code, or to add support for custom languages, please reference [Configure Code Runners](/custom/config-code-runners).
111

111 lines MARKDOWN