1. 개요
See the Pen Ace editor with bootstrap 5 by ejinu (@ejinu) on CodePen.
2. Ace
Ace를 이용하면 웹 브라우저 상에서 시각적으로 코드를 보기 좋게 볼 수 있고, 작성할 수 있습니다.
다양한 언어 및 테마와 기능들을 제공합니다.
다음은 python 코드 편집기에 대한 예시입니다.
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Editor</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/mode-python.min.js"></script>
<style>
#editor {
position: absolute;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="editor"></div>
</body>
<script>
var editor = ace.edit("editor");
editor.session.setMode("ace/mode/python");
editor.setValue('# Write Python 3 code in this editor and run it.\r\n\r\ndef greeting():\r\n print("Hello World!")\r\n\r\ngreeting()', 1);
</script>
</html>렌더링된 결과는 다음과 같습니다.
3. 테마
기본 테마는 밝은(Light) 모드입니다. 원하는 테마를 로드한 뒤, setTheme를 이용하여 코드 편집기의 색상을 변경할 수 있습니다.
다음은 theme-tomorrow_night_bright를 적용한 예시입니다.
<head>
... 생략
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/theme-tomorrow_night_bright.min.js"></script>
... 생략
</head>
<body>
<div id="editor"></div>
</body>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow_night_bright");
editor.session.setMode("ace/mode/python");
editor.setValue('# Write Python 3 code in this editor and run it.\r\n\r\ndef greeting():\r\n print("Hello World!")\r\n\r\ngreeting()', 1);
</script>결과를 확인해 봅니다.
4. 옵션
다양한 옵션들이 존재하지만
폰트 크기(setFontSize), 들여쓰기(setTabSize), 활성화된 줄 강조(setHighlightActiveLine) 기능을 사용해 봅니다.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow_night_bright");
editor.session.setMode("ace/mode/python");
editor.setFontSize("14px");
editor.session.setTabSize(4);
editor.setHighlightActiveLine(true);
editor.setValue('# Write Python 3 code in this editor and run it.\r\n\r\ndef greeting():\r\n print("Hello World!")\r\n\r\ngreeting()', 1);결과를 확인해 봅니다.
5. 자동 완성
VSCode의 Extensions 만큼 코드 자동완성을 지원하지는 않지만
몇몇 매우 기본적인 문법은 자동완성을 지원하는 기능이 있습니다.
필요한 js 코드를 불러오고, enableSnippets와 enableLiveAutocompletion를 활성화해 줍니다.
다음은 python의 if __name__ == '__main__': 에 대한 자동완성 예시입니다.
<head>
... 생략
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/ext-language_tools.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/snippets/python.min.js"></script>
... 생략
</head>
<body>
<div id="editor"></div>
</body>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/tomorrow_night_bright");
editor.session.setMode("ace/mode/python");
editor.setOptions({copyWithEmptySelection: false, showGutter: true, showLineNumbers: true, enableBasicAutocompletion: false, enableSnippets: true, enableLiveAutocompletion: true});
editor.setValue('# Write Python 3 code in this editor and run it.\r\n\r\ndef greeting():\r\n print("Hello World!")\r\n\r\ngreeting()', 1);
</script>결과를 확인해 봅니다.
IT 도서관