[점프 투 스프링부트] 3장 SBB 서비스 개발(마크다운) - 2023. 09. 11.

#13 : 마크다운

01. 마크다운 문법

- 리스트

* 작성

* 자바
* 스프링부트
* 알고리즘

1. 하나
1. 둘
1. 셋

* 실제 화면 출력

* 자바 * 스프링부트 * 알고리즘

1. 하나 1. 둘 1. 셋

 

- 강조

* 작성

스프링부트는 **자바**로 만들어진 웹 프레임워크이다.

* 실제 화면 출력

 

- 링크 : [링크명](링크주소)의 형식

* 작성

스프링 홈페이지는 [https://spring.io](https://spring.io) 입니다.

* 실제 화면 출력

 

- 소스코드 : 백쿼트(백틱) 3개를 코드 시작과 끝 위아래에 붙인다.

* 작성

```
package com.mysite.sbb;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {
    @GetMapping("/hello")
    @ResponseBody
    public String hello() {
        return "Hello Spring Boot Board";
    }
}
```

* 실제 화면 출력

 

- 인용 : > 기호를 맨 앞에 사용 후 1칸 띄어쓰기

* 작성

> 마크다운은 Github에서 사용하는 글쓰기 도구이다.

* 실제 화면 출력

 

02. 마크다운 설치

마크다운 기능을 사용하려면 라이브러리 설치가 필요하다.

- build.gradle 수정

dependencies {
    (... 생략 ...)
    implementation 'org.commonmark:commonmark:0.21.0'
}

* commonmark는 버전을 지정해주어야 한다. 왜냐하면 스프링부트가 내부적으로 관리하는 라이브러리에 포함되면 버전 정보가 필요없고 버전 정보가 필요없고 포함되지 않으면 필요하기 때문이다.

 

03. 마크다운 컴포넌트

- 그냥 마크다운 라이브러리를 적용시켜 변환된 html을 얻는 것보다 더 범용적으로 사용할 수 있는 마크다운 컴포넌트를 만들고 타임리프 템플릿에서 사용하는 방법에 대해 알아보자.

- CommonUtil.java 컴포넌트 생성

package com.mysite.sbb.component;

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 markdown) {
        Parser parser = Parser.builder().build();
        Node document = parser.parse(markdown);
        HtmlRenderer renderer = HtmlRenderer.builder().build();
        return renderer.render(document);
    }
}

- @Component 어노테이션을 이용하여 컴포넌트하는 것을 명시, 스프링부트에 의해 관리되는 Bean으로 등록된다.

- markdown 메서드를 생성하여 마크다운 텍스트를 HTML문서로 변환하여 반환한다.

 

04. 템플릿에 마크다운 적용

- question_detail.html 수정

...생략...
    <!--질문-->
    <h1 class="border-bottom py-2" th:text="${question.subject}"></h1>
    <div class="card my-3">
        <div class="card-body">
            <div class="card-text" th:utext="${@commonUtil.markdown(question.content)}"></div>
...생략...
    <!--답변 반복 시작-->
    <div class="card my-3" th:each="answer : ${question.answerList}">
        <a th:id="|answer_${answer.id}|"></a>
        <div class="card-body">
            <div class="card-text" th:utext="${@commonUtil.markdown(answer.content)}"></div>
...생략...

* 기존의 style을 삭제한 후 th:utext="${@commonUtil.markdown(answer.content)}"의 컴포넌트를 적용했다. 이때 th:text가 아닌 th:utext를 사용해야 이스케이프 되지 않고 제대로 출력된다.

 

05. 마크다운 확인

- 이제 질문 또는 답변은 마크다운으로 작성 시 마크다운 형태로 보이게 된다.

* 작성

**마크다운 문법으로 작성해 봅니다.**

* 리스트1
* 리스트2
* 리스트3

파이썬 홈페이지는 [http://www.python.org](http://www.python.org) 입니다.

* 실제 화면 출력