Skip to content

Instantly share code, notes, and snippets.

@Creta5164

Creta5164/simple-monaco-editor-sample.html

Last active December 28, 2021 06:58
Show Gist options
  • Save Creta5164/ebad87660f72ed3034bbf7d7883cf0e4 to your computer and use it in GitHub Desktop.
Save Creta5164/ebad87660f72ed3034bbf7d7883cf0e4 to your computer and use it in GitHub Desktop.
Download ZIP
마이크로소프트의 IDE인 vscode에서 사용하는 코드 편집기를 웹에서 사용 가능한 monaco 에디터를 간결하게 시작하는 템플릿입니다.
Raw
simple-monaco-editor-sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>모나코 에디터 샘플</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css"/>
</head>
<body style="margin:0;">
<div id="monaco" style="height:100vh"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.16.2/min/vs/loader.js"></script>
<script>
var editor;
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.16.2/min/vs' }});
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('monaco'), {
theme: 'vs-dark',
fontFamily: 'Nanum Gothic Coding',
automaticLayout: true,
language: 'markdown',
value: [
'# Monaco 코드 편집기',
'**세상에서 인기 있는 코드 편집기**를 웹에서 간단하게 사용해보세요. ',
'고마워요, Microsoft!',
'<br>',
'현재 언어설정은 markdown입니다.'
].join('\n')
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment