Skip to content

Monaco エディター

プレゼンテーションでなにか変更を加えたいときは、言語 ID の後に {monaco} を追加するだけで、そのブロックが完全な機能を備えた Monaco エディターに変わります!

md
```ts {monaco}
console.log('HelloWorld')
```

詳しくは Configuring Monaco をご覧ください。

差分エディター

Monaco は 2 つのコードブロック間の差分を生成することもできます。{monaco-diff} を使用してブロックを Monaco 差分エディター に変え、~~~ を使って変更前のコードと変更後のコードを区切ります。

md
```ts {monaco-diff}
console.log('Original text')
~~~
console.log('Modified text')
```

エディターの高さ

デフォルトでは、Monaco エディターは初期コンテンツに基づいて固定の高さを持っています。空のコードブロックや小さなコードブロックから始めて、コードを入力するにつれてエディターが自動的に高さを調整するようにしたい場合は、{height:'auto'} を使用します。

md
```ts {monaco} {height:'auto'}
// エディターの高さはコンテンツに基づいて自動的に調整されます
console.log('Hello, World!')
```

CSS 単位 (例えば {height:'300px'}{height:'100%'}) を使用して特定の高さを設定することもできます。

Released under the MIT License.