각 프로그래밍 언어별 코드 에디터
1. 라이브러리 다운
라이브러리를 다운로드하지 않고 CDN으로 불러올 수 있지만, 현재 버전을 유지하기 위해 라이브러리를 직접 다운로드하여 프로젝트에 설정하였다.
1-1) [주소 접속] -> [Version 5] 클릭
1-2) [Get the current version] 클릭
2. 필요 라이브러리 폴더 설정
2-1) 파일 목록
압축을 풀면 아래 사진고 같이 나오지만, 모든 파일을 프로젝트에 넣는것티 아닌 필요에 따른 파일만 집어넣는다.
2-2) 프로젝트에 필요 폴더 넣기
내 프로젝트의 Resources 위치에 [codemirror] 폴더를 만들어 [addon, lib, mode, theme]를 복사한다.
- addon : 에디터의 옵션(검색 기능, 자동 완성, 힌트, 다중 커서 지원 등) 폴더
- lib : 핵심 라이브러리 코드가 포함된 폴더 (기본적인 코드 편집기의 동작을 처리하는 핵심 스크립트)
- mode : 다양한 프로그래밍 언어의 구문 강조(syntax highlighting)를 처리하는 모드 파일들이 있는 폴더 (각 언어에 특화된 구문 분석 및 강조 규칙 정의)
- theme : Codemirror의 테마 파일들이 위치한 폴더로 코드 편집기의 외관(스타일)과 관련된 CSS 파일들이 포함
3. 코드 에디터 사용 방법
사용하려는 프로그래밍 언어, 옵션, 테마에 맞게 스크립트 / CSS를 설정한다.
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="./js/lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" type="text/css" href="./js/lib/codemirror/theme/darcula.css">
<link rel="stylesheet" type="text/css" href="./js/lib/codemirror/addon/fold/foldgutter.css">
<link rel="stylesheet" type="text/css" href="./js/lib/markdown/addon/highlight/styles/darcula.css">
<script type="text/javascript" src="./js/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="./js/codemirror/mode/clike/clike.js"></script>
<script type="text/javascript" src="./js/codemirror/addon/fold/brace-fold.js"></script>
<script type="text/javascript" src="./js/codemirror/addon/fold/foldcode.js"></script>
<script type="text/javascript" src="./js/codemirror/addon/fold/foldgutter.js"></script>
<script type="text/javascript" src="./js/codemirror/addon/selection/active-line.js"></script>
<style>
.CodeMirror {
height: 725px;
font-size: 16px;
}
</style>
</head>
<body>
<textarea id="code"></textarea>
<script>
CodeMirror.fromTextArea(document.getElementById('code'), {
mode: "text/x-java",
theme: "darcula",
lineNumbers: true,
styleActiveLine: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
</script>
</body>
</html>
- lineNumbers : 코드 라인 번호를 표시
- styleActiveLine : 현재 활성화된 라인을 강조
- foldGutter : 코드 접기 활성화
- gutters : 왼쪽 여백 옵션, 왼쪽 여백에 라인 넘버와 코드 접기를 표시
3-1) 코드 에디터 완성 화면
반응형
'JavaScript' 카테고리의 다른 글
프록시(Proxy) 객체 JavaScript에서 사용 방법(옵저버 패턴) (0) | 2023.01.09 |
---|---|
배열의 특정 값 (includes, findIndex, indexOf) 찾는 방법 (0) | 2022.12.18 |
Map, 배열의 최대 값(Max) 최소 값(Min) 구하기 (0) | 2022.12.17 |
[JavaScript] 배열(1차원 배열, 2차원 배열) sort() 정렬 방법 (0) | 2022.12.12 |
[JavaScript] JavaScript로 힙(Heap) 구현하기 (0) | 2022.12.10 |