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
'Follow Work > SpringbootBoard' 카테고리의 다른 글
| [HTML] iframe 유튜브 동영상 자동 연속재생 (14) | 2022.10.06 |
|---|---|
| [Springboot] Jsoup 이용하여 웹 크롤링하기 (0) | 2022.10.02 |
| [API] SpringBoot 네이버 쇼핑 API 출력하기 (0) | 2022.09.27 |
| [HTML CSS JS] 네비게이션 바 만들기 (0) | 2022.09.27 |
| [API] 카카오maps API 목록으로 표출하기 오류 (0) | 2022.09.15 |