simplemde(https://simplemde.com/) 사이트 접속
- View on GitHub 클릭
- 깃헙에서 CDN 링크 복사
<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>
/template/layout.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- simpleMDE css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<!-- Favicon 탭에 들어가는 아이콘 -->
</head>
<body>
<!-- SimpleMDE js CDN -->
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<!-- 각 페이지마다 추가되어야 할 자바스크립트 영역 -->
<th:block layout:fragment="sub-script"></th:block>
</body>
</html>
/templates/board/create.html에 textarea id=content를 simplemde로 변환하는 js 추가
<script layout:fragment="sub-script" type="text/javascript">
var simpleMDE = new SimpleMDE({element: document.getElementById("content")});
</script>
detail.html textarea content simplemde js 추가
// 마크다운 에디터 추가
var simpleMDE = new SimpleMDE({element: document.getElementById("content")});
- 댓글에도 마크다운 적용된 것을 확인할 수 있음
(설정) build.gradle 마크다운 디펜던시 추가
// 마크다운 뷰어 디펜던시
implementation 'org.commonmark:commonmark:0.21.0'
- runtime에 commonmark가 추가된 것 확인
common/CommonUtil.java 생성
package com.eunji.backboard.common;
import org.commonmark.node.Node;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.HtmlRenderer;
import org.springframework.stereotype.Component;
@Component
public class CommonUtil {
public String markdown(String content) {
Parser parser = Parser.builder().build();
Node document = parser.parse(content); // 기존 마크다운으로 작성된 틀 파싱
HtmlRenderer renderer = HtmlRenderer.builder().build();
return renderer.render(document); // HTML로 렌더링 텍스트 리턴
}
}
/templates/board/detail.html 마크다운 뷰어 적용
<div th:text="${board.content}" class="card-text"></div>
<div th:text="${reply.content}" class="card-text"></div>
<div th:utext="${@commonUtil.markdown(board.content)}" class="card-text"></div>
<div th:utext="${@commonUtil.markdown (reply.content)}" class="card-text"></div>
