728x90
마크다운 에디터
마크다운에 익숙하지 않은 사용자도 익숙한 도구 모음 버튼과 바로 가기를 사용할 수 있습니다.
또한 편집하는 동안 구문이 렌더링되어 예상 결과를 명확하게 표시합니다.
마크다운에디터에는 여러가지 에디터가 있다.
나는 SimpleMDE Markdown Editor를 적용 해볼 것이다.
JavaScript Markdown Editor - SimpleMDE
JavaScript Markdown Editor - SimpleMDE
simplemde.com
위 사이트에 들어가면 아래와 같은 데모화면을 확인할 수있다.
적용방법은 간단하다.
사이트에서 View on GitHub을 클릭해 들어간다.
README.md파일을 확인해보면 적용방법을 확인 할 수있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--마크다운에디터 설치-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
</head>
<body>
<div >
<textarea id="markdown" rows="10"></textarea>
</div>
<!--마크다운에디터 적용방법-->
<script layout:fragment="script">
var simplemde = new SimpleMDE({ element: document.getElementById("markdown") });
</script>
</body>
</html>데모화면처럼 마크다운에디터가 잘 적용된 것을 확인 할 수 있다.
728x90
