Monaco Editor 예시

1 개요

Monaco Editor 예시

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css">
<style>
  #container {
    height: 400px;
    border: 1px solid black;
  }
</style>

<div id="container"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js"></script>
<script>
  require.config({
    paths: {
      'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs'
    }
  });
  require(["vs/editor/editor.main"], () => {
    monaco.editor.create(document.getElementById('container'), {
      value: `function x() {
  console.log("Hello world!");
}`,
      language: 'java',
      theme: 'vs-dark',
    });
  });

</script>

2 같이 보기

• Monaco Editor

3 참고

• https://stackoverflow.com/questions/63179813/how-to-run-the-monaco-editor-from-a-cdn-like-cdnjs