CodeMirror 적용

CodeMirror를 적용하면 에디터의 "소스 보기"에서 코드를 더 편리하게 편집할 수 있습니다.

CodeMirror가 적용되지 않은 'Source View'CodeMirror가 적용된 'Source View'
Without CodeMirrorWith CodeMirror

CodeMirror를 적용하려면 CodeMirror 사이트에서 JS, CSS 파일을 다운로드하여 경로를 추가하거나 CDN을 사용할 수 있습니다.

또는 Synap Editor 패키지의 externals 디렉터리에 포함된 codemirror 스크립트 파일을 사용할 수도 있습니다.

적용 방법

externals/codeMirror에 포함된 codemirror.min.js와 xml.min.js 사용하기

<!-- index.html -->
<!-- code mirror -->
<script type="text/javascript" src="externals/codeMirror/codemirror.min.js"></script>
<script type="text/javascript" src="externals/codeMirror/xml.min.js"></script>
<link rel="stylesheet" href="externals/codeMirror/codemirror.min.css">

CDN을 통한 적용

에디터가 설치된 HTML 파일의 <head> 태그에 다음을 추가합니다.

<!-- index.html -->
<!-- code mirror -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/mode/xml/xml.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.0/codemirror.min.css">