03M. 마크다운 관련

• 마크다운 문법
  • 리스트
  • 강조
  • 링크
  • 소스코드
  • 인용
• 마크다운 설치
• 마크다운 컴포넌트
• 템플릿에 마크다운 적용
• 마크다운 확인

---

3-13. 마크다운

---

점프 투 스프링부트 - WikiDocs

---

pahkey/sbb3 - 3-13

질문이나 답변을 작성할 때 일반적인 텍스트 외에 글자를 진하게 표시하거나 링크를 추가하고 싶을 수도 있다. "마크다운"이라는 글쓰기 도구를 이용하면 이런 것들을 쉽고 간단하게 표현할 수 있다.

이번에는 SBB에 마크다운을 적용해 보자.

마크다운은 웹 사이트에서 사용하는 글 쓰기 도구로 Github등 많은 사이트에서 사용한다.

---

마크다운 문법

SBB에 마크다운을 적용하기 전에 마크다운의 문법을 먼저 알아보자.

리스트

목록을 표시하기 위해 다음처럼 작성한다.

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

위 문자열을 마크다운 해석기가 HTML로 변환하면 실제 화면에서는 다음과 같이 보인다.

변환결과

<ul>
<li>자바</li><li>스프링부트</li><li>알고리즘</li>
</ul>

마크다운 해석기는 조금 후에 설치하고 실습할 것이니 우선은 마크다운 문법을 익혀보자.

순서가 있는 목록을 표시하려면 다음처럼 작성한다.

1. 하나
2. 둘
3. 셋

결과는 다음과 같다.

변환결과

<ol>
<li>하나</li><li>둘</li><li>셋</li>
</ol>

강조

작성한 글자를 강조 표시하려면 강조할 텍스트 양쪽에 **를 넣어 감싼다.

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

결과는 다음과 같다.

변환결과

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

링크

HTML 링크는 다음처럼 [링크명](링크주소) 규칙을 적용하여 생성한다.

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

결과는 다음과 같다.

스프링 홈페이지는 <a href="https://spring.io">https://spring.io</a> 입니다.

소스코드

소스코드는 백쿼트 ` 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";
    }
}
\`\`\`

결과는 다음과 같다.

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에서 사용하는 글쓰기 도구이다.

결과는 다음과 같다.

변환결과

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

마크다운의 보다 자세한 사용방법은 다음 문서를 참고하자.

마크다운 문법 공식 문서: www.markdownguide.org/getting-started

마크다운 설치

SBB에 마크다운 기능을 추가하려면 마크다운 라이브러리를 설치해야 한다. 다음처럼 build.gradle 파일을 수정하여 마크다운을 설치하자.

파일명: /sbb/build.gradle

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

.["Refresh Gradle Project"]를 실행하여 최신버전인 0.21.0 버전의 commonmark 라이브러리를 설치하자.

라이브러리 설치 후 로컬서버 재시작도 잊지말자.

build.gradle 파일에서 commonmark의 버전정보가 필요한 이유

지금까지 build.gradle 파일에 필요한 라이브러리를 등록할때 버전을 명시하지 않았다. 하지만 commonmark는 위와 같이 0.21.0 이라는 버전을 지정해 주어야만 한다. 이 차이는 스프링부트의 라이브러리 관리 방식때문이다. 스프링부트가 내부적으로 관리하는 라이브러리에 포함되면 버전 정보가 필요없고 포함되지 않으면 버전 정보가 필요하다. 즉, commonmark는 스프링부트가 내부적으로 관리하는 라이브러리가 아니다.

스프링부트가 관리하는 라이브러리의 경우 버전 정보를 명시하지 않으면 스프링부트가 가장 궁합이 잘 맞는 버전으로 자동 선택한다. 따라서 라이브러리들의 호환성을 생각한다면 버전 정보는 따로 입력하지 않는 편이 좋다.

---

마크다운 컴포넌트

이제 질문이나 답변의 "내용"에 마크다운 라이브러리를 적용해야 한다. 컨트롤러에서 질문이나 답변을 조회한 후에 마크다운 라이브러리를 적용하면 변환된 HTML을 얻을 수 있다. 하지만 여기서는 그보다는 좀 더 범용적으로 사용할 수 있는 마크다운 컴포넌트를 만들고 타임리프 템플릿에서 작성한 마크다운 컴포넌트를 사용하는 방법에 대해서 알아보자.

다음처럼 CommonUtil 컴포넌트를 작성하자.

파일명: /sbb/src/main/java/com/mysite/sbb/CommonUtil.java

package com.mysite.sbb;

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 애너테이션을 사용하여 CommonUtil 클래스를 생성했다. 이렇게 하면 이제 CommonUtil 클래스는 스프링부트에 의해 관리되는 빈(bean, 자바객체)으로 등록된다.

이렇게 빈(bean)으로 등록된 컴포넌트는 템플릿에서 바로 사용할 수 있다.

CommonUtil 클래스에는 markdown 메서드를 생성했다. markdown 메서드는 마크다운 텍스트를 HTML 문서로 변환하여 리턴한다. 즉, 마크다운 문법이 적용된 일반 텍스트를 변환된(소스코드, 기울이기, 굵게, 링크 등) HTML로 리턴한다.

참고 - commonmark/commonmark-java

템플릿에 마크다운 적용

이제 질문 상세 템플릿에 마크다운을 적용해 보자.

파일명: /sbb/src/main/resources/templates/question_detail.html

<!-- (... 생략 ...) -->
<!-- 질문 -->
<h2 class="border-bottom py-2" th:text="${question.subject}"></h2>
<div class="card my-3">
    <div class="card-body">
        <div class="card-text" th:utext="${@commonUtil.markdown(question.content)}"></div>
        <div class="d-flex justify-content-end">
        <!-- (... 생략 ...) -->

<!-- 답변 반복 시작 -->
<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>
        <div class="d-flex justify-content-end">
        <!-- (... 생략 ...) -->

줄 바꿈을 표시하기 위해 사용했던 기존의 style="white-space: pre-line;" 스타일은 삭제하고 ${@commonUtil.markdown(question.content)}와 같이 마크다운 컴포넌트를 적용했다. 이 때 th:text가 아닌 th:utext를 사용한 부분에 주의하자. 만약 th:utext 대신 th:text를 사용할 경우 HTML의 태그들이 이스케이프(escape)처리되어 태그들이 그대로 화면에 보인다. 마크다운으로 변환된 HTML 문서를 제대로 표시하려면 이스케이프 처리를 하지 않고 출력하는 th:utext를 사용해야 한다.

마크다운 확인

이제 질문 또는 답변을 마크다운 문법으로 작성하면 브라우저에서 어떻게 보이는지 확인해 보자.

다음 내용으로 글을 작성해 보자.

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

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


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

위와 같이 마크다운 문법으로 작성한 글은 이제 다음과 같이 보일 것이다.

※ 참고: 마크다운 에디터

마크다운 문법을 몰라도 simplemde와 같은 마크다운 UI 도구를 사용하면 마크다운을 보다 쉽게 사용할 수 있다

---

이찬희 (MarkiiimarK)

Never Stop Learning.