#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) 입니다.
* 실제 화면 출력

'T-I-L > [책] 요약&정리' 카테고리의 다른 글
| [점프 투 스프링부트] 3장 SBB 서비스 개발(추가기능, 서버, AWS 라이트세일, 서버 접속 설정, 서버 접속 프로그램, SBB 오픈) - 2023. 09. 13. (0) | 2023.09.13 |
|---|---|
| [점프 투 스프링부트] 3장 SBB 서비스 개발(검색) - 2023. 09. 12. (0) | 2023.09.12 |
| [점프 투 스프링부트] 3장 SBB 서비스 개발(추천, 앵커) - 2023. 09. 07. (0) | 2023.09.07 |
| [점프 투 스프링부트] 3장 SBB 서비스 개발(수정과 삭제) - 2023. 09. 05. ~ 2023. 09. 06. (0) | 2023.09.05 |
| [점프 투 스프링부트] 3장 SBB 서비스 개발(글쓴이 표시) - 2023. 09. 04. (0) | 2023.09.04 |
