더북(TheBook)

20.6.1 CodeMirror 적용

 

CodeMirror는 코드 에디터 라이브러리입니다. 코드에 색상을 입혀 주는 역할을 하는데요. 마크다운을 작성할 때 각 문법에 따라 다른 색상을 입혀 주고, 마크다운 내부에 입력하는 코드(예: 자바스크립트)에도 문법에 따라 색을 입혀 줍니다.

EditorPane에서 CodeMirror 관련 자바스크립트 파일과 스타일을 불러오고, componentDidMount가 되었을 때 CodeMirror 인스턴스를 만들어 페이지에 나타나게 하겠습니다. 이 과정에서 code-editor 클래스를 가진 divref를 설정하여 해당 DOM에 CodeMirror를 삽입합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.