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の結果を得ることができます。