Monacoの設定
環境: client
このセットアップ関数はクライアント側でのみ動作します。パッケージのインポート時にはブラウザの互換性を確認してください。
以下の内容で./setup/monaco.tsを作成します。
import { defineMonacoSetup } from '@slidev/types'
export default defineMonacoSetup(async (monaco) => {
// 設定するためには`monaco`を使用します
})
詳細はconfiguring Monacoを参照してください。
使い方
スライドでMonacoを使用するには、コードスニペットに{monaco}を追加するだけです：
//```js
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // error
//```
これを以下のように変更します
//```js {monaco}
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // error
//```
エクスポート
デフォルトでは、Monacoは開発者モードのみで動作します。エクスポートされたSPAでMonacoを使用したい場合は、フロントマターで設定してください：
---
monaco: true # デフォルト "dev"
---
型の自動インストール
MonacoでTypeScriptを使用する場合、依存関係のある型は自動的にクライアントサイドにインストールされます。
//```ts {monaco}
import { ref } from 'vue'
import { useMouse } from '@vueuse/core'
const counter = ref(0)
//```
上記の例では、vueと@vueuse/coreはdependencies / devDependenciesとしてローカルにインストールされています。あとはSlidevが自動的にエディタに対応した型を作成します。
テーマの設定
テーマはライトテーマ/ダークテーマをベースにSlidevで制御されています。テーマをカスタマイズしたい場合は、テーマのIDをsetup関数に指定します：
// ./setup/monaco.ts
import { defineMonacoSetup } from '@slidev/types'
export default defineMonacoSetup(() => {
return {
theme: {
dark: 'vs-dark',
light: 'vs',
},
}
})
カスタムテーマを使用する場合には次のようにします：
import { defineMonacoSetup } from '@slidev/types'
// change to your themes
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用のテーマを作成する場合は、setup関数内で動的
import()を使用すると、より良いtree-shakingとcode-splittingの結果を得ることができます。