💻

[Slidev]SlidevでMonacoエディタを使用する

2022/12/02に公開

このページではSlidevでMonacoエディタを使用する方法について解説します。

Monacoエディタとは?

MonacoエディタはMicrosoftがオープンソースで開発しているコードエディタです。
Webブラウザ上で動作することができるため、Web上のコンテンツに埋め込んで使用することができます。

SlidevでMonacoエディタを使用する

前準備

プロジェクトルートに./setup/monaco.tsを作成します。

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

export default defineMonacoSetup(async (monaco) => {
})

コードブロックにMonacoエディタを適用する

コードスニペットに{monaco}を追加するだけでMonacoエディタに変更することができます。

slides.md
# Code

```python {monaco}
import numpy as np

def AND(
    x1: int,
    x2: int,
) -> int:
    """
    AND gate
    """
    x = np.array([x1, x2])
    w = np.array([0.5, 0.5])
    b = -0.8
    tmp = np.sum(w*x) + b

    if tmp > 0:
        return 1
    else:
        return 0
```

slidev_monaco_editor

参考サイト

Discussion