JavaScript

Codemirror를 사용해 코드 에디터 만드는 방법

cob 2024. 7. 24. 09:59
각 프로그래밍 언어별 코드 에디터

 

 

 

1. 라이브러리 다운

라이브러리를 다운로드하지 않고 CDN으로 불러올 수 있지만, 현재 버전을 유지하기 위해 라이브러리를 직접 다운로드하여 프로젝트에 설정하였다.

 

https://codemirror.net/

 

CodeMirror

In-browser code editor

codemirror.net

 

 

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) 코드 에디터 완성 화면

반응형