Cấu hình Monaco

Environment: client

This setup function will only run on client side. Make sure the browser compatibility when importing packages.

Tạo file ./setup/monaco.ts với nội dung sau:

import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(async (monaco) => {
  // use `monaco` to configure
})

Tim hiểu thêm về cấu hình Monaco.

TypeScript Types

Khi sử dụng TypeScript với Monaco, các types cho các dependencies sẽ được cài đặt tự động trên phía client.

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

const counter = ref(0)
```

Trong ví dụ trên, hãy đảm bảo rằng vue và @vueuse/core được cài đặt là các dependencies / devDependencies trong dự án của bạn. Slidev sẽ xử lý phần còn lại để tự động làm việc với các types cho trình editor. Khi được triển khai dưới dạng SPA, các types này cũng sẽ được đóng gói cho việc static host.

Các type bổ sung

Slidev sẽ quét tất cả các khối code Monaco trong các slide của bạn và tự động import các type cho những thư viện mà bạn đã sử dụng. Trong trường hợp Slidev bỏ sót một số type, bạn có thể chỉ định rõ ràng các package bổ sung để import các type cho chúng:

---
monacoTypesAdditionalPackages:
  - lodash-es
  - foo
---

Tự động nhận type

Bạn có thể tùy chọn chuyển sang load các type từ CDN bằng cách thiết lập headmatter sau:

---
monacoTypesSource: ata
---

Tính năng này được hỗ trợ bởi @typescript/ata và hoạt động hoàn toàn ở client-side.

Cấu hình theme

Kể từ v0.48.0, Monaco sẽ tái sử dụng theme Shiki mà bạn đã cấu hình trong file cấu hình của Shiki, được hỗ trợ bởi @shikijs/monaco. Bạn không cần phải lo lắng về điều này nữa, và nó sẽ có một style nhất quán với phần còn lại của các khối code trong Slidev.

Cấu hình Trình soạn thảo

Có sẵn từ v0.43.0

Nếu bạn muốn tùy chỉnh trình soạn thảo Monaco, bạn có thể truyền một object editorOptions tương thích với định nghĩa Monaco IEditorOptions.

```ts {monaco} { editorOptions: { wordWrap:'on'} }
console.log('HelloWorld')
```

Ngoài ra, nếu bạn muốn những option này được áp dụng cho mọi thực thể Monaco, bạn có thể return chúng trong hàm defineMonacoSetup.

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

export default defineMonacoSetup(() => {
  return {
    editorOptions: {
      wordWrap: 'on'
    }
  }
})

Disable

Từ v0.48.0, trình chỉnh sửa Monaco được enable mặc định và chỉ được đóng gói khi bạn sử dụng nó. Nếu bạn muốn disable nó, bạn có thể đặt monaco thành false trong frontmatter của slide:

---
monaco: false # cũng có thể là `dev` hoặc `build` để enable có điều kiện
---

Cấu hình code runners

Để cấu hình cách Monaco Runner chạy code hoặc thêm hỗ trợ cho các ngôn ngữ tùy chỉnh, vui lòng tham khảo Cấu hình code runners.