⌘

editor.js - Simple Markdown Javascript Library

hahwul

하루패드(haroopad) 알기전에 google blogger에 markdown 어떻게 적용할까 고민이 많았었는데요, 그러면서 찾아본것들 중 하나 간략하게 소개해드릴까 합니다. editor.js란 자바스크립트 라이브러리로 별다른 코드 없이 웹상에서 마크다운 에디터를 구현할 수 있습니다.

lepture editor

우선 git 주소는 https://github.com/lepture/editor 입니다. 자체 cdn에서 js 파일 로드 후 Editor 객체 생성으로 만들 수 있습니다.

<link rel="stylesheet" href="http://lab.lepture.com/editor/editor.css" />
<script type="text/javascript" src="http://lab.lepture.com/editor/editor.js"></script>
<script type="text/javascript" src="http://lab.lepture.com/editor/marked.js"></script>

<!-- 실제 에디터가 생성될 위치 -->
<textarea id="editor"></textarea> 

<script>
var editor = new Editor({
element: document.getElementById("editor")
});
// editor 객체 생성

editor.render();
// 랜더링!
post
</script>
markdown editor
preview markdown

Editor Styling

위에 코드 기준으론 https://lab.lepture.com/editor/editor.css 에서 스타일을 정하게 됩니다. 로컬이나 별도로 구성하신 css로 땡겨서 디자인을 바꿀 수 있습니다.

각 영역별 이름은 이렇습니다.

editor-toolbar : 에디터 상단 툴바에 대한 서식 CodeMirror : 본문 서식 editor-preview : markdown 미리보기에 대한 서식

예를들어 본문(Editor) 부분의 색감을 바꾸자고 한다면..

.CodeMirror {
  height: 450px;
  background-color: black;
  color: white;
}

#develop