게시판에 마크다운 적용하기

✏️ dependencies

• gradle 의 dependencies 에 라이브러리를 추가해야 한다.
  • 참고로 start.spring.io 에서는 추가할 수 없다.
  • spring boot가 관리하는 라이브러리가 아니기 때문에 버전 정보를 작성해주어야 한다.

implementation 'org.commonmark:commonmark:0.21.0'

✏️ 마크다운 처리 로직 객체 생성

📍 CommonUtil

• @Component 를 사용해 Bean 으로 등록
• 일반 text 를 저장하고있는 String 을
  마크다운 문법이 적용된 String 으로 변환하는 작업

import org.commonmark.node.Node;
import org.springframework.stereotype.Component;
import org.commonmark.parser.Parser;
import org.commonmark.renderer.html.HtmlRenderer;

@Component
public class CommonUtil {

    //-- 마크다운 런더링 로직 --//
    public String markdown(String markdown) {
        Parser parser = Parser.builder().build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(document);
    }
}

✏️ Web 계층

• 기존 text 박스를 제거하고 markdown 매서드로 랜더링 한 text 박스로 교체한다.

📍 markdown 적용

• 일반 Text 출력
  • 줄바꿈을 반영하기 위해 style 에서 줄바꿈 기능을 구현해준다.
  • text 에 원하는 객체를 바로 출력시킨다.

<div class="card-text"
     style="white-space: pre-line;"
     th:text="${question.content}">
</div>

• 마크다운 적용
  • 원하는 객체를 markdown 매서드를 서용해 랜더링 후 출력시킨다.
  • Spring Conatainer 의 method 를 실행시키기 위해 unEscape text 를 사용한다.
    🔗 text VS. utext

<div class="card-text"
     th:utext="${@commonUtil.markdown(question.content)}">
</div>