JS - 마크다운 문법 html 웹 페이지와 호환하기 (마크다운 html 변환, markdown to html)

개요

마크다운 문법으로 구성된 문서를 HTML에 표시하고 싶을 때 어떻게 해야할까?

직접 구현하는 것도 좋지만, 보편적으로 이미 만들어져있는 것을 사용하는 것이 생산성면에서 훨씬 이득이다.

보편적으로 사용되는 Markdown > HTML로 변환하는 라이브러리는 Marked를 이용한다.

이번 포스팅에서는 Marked 라이브러리를 이용하여 Markdown 형식의 문서를 HTML 로 변환하는 방법에 대해 가볍게 다뤄본다. 단, 단순히 파싱만 하는 과정을 소개하며 자세한 옵션에 대한 처리는 다루지 않는다.

(글을 쓰는 목적은 단순히 마크다운의 문서를 웹 페이지에 표시하기 위함이기 때문이다.)

Marked 라이브러리란?

Marked는 JavaScript 기반의 Markdown 파서(parser)이다.

이 라이브러리는 Markdown 형식의 텍스트를 HTML로 변환하는 데 사용되도록 설계되었다.

Markdown은 문서를 작성할 때 간단한 텍스트 기반의 형식으로,

GitHub, Reddit, 블로그, 문서 작성 등에 널리 사용된다.

마크다운의 문법을 HTML로 변환하기 위해서는 parse() 메소드를 이용하면 된다.

marked.parse(변환할 마크다운 문법 내용);

사용 예제 (Sample)

라이브러리 호출

Marked 라이브러리를 사용하기 위해 해당 라이브러리를 호출하여야 한다.

Marked 공식 홈페이지에서 제공하는 CND 주소는 다음과 같다.

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

마크다운 예시 내용

마크다운으로 구성된 내용이 다음과 같이 있다고 해보자.

# 마크다운 헤더1
**마크다운 문법**을 **HTML**로 변환하는 샘플 페이지
* JavaScript를 통해 쉽게 사용할 수 있다.

# : 헤더를 나타낸다. HTML에서는 <H1>을 의미한다.
** 글자 ** : 글자를 굵게하는 효과를 지닌다. HTML에서는 <B>를 의미한다.
* : 리스트의 목록을 나타낸다. HTML에서는 <UL>, <LI>를 의미한다.

샘플 HTML 페이지

위에서의 마크다운 문법의 내용을 이해를 돕기 위해 자바스크립트 변수로 저장하고,

marked.parse() 메서드를 통해 HTML로 변환해본다.

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <!-- Marked 라이브러리 -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
  	// 마크다운 문법을 변수로 저장
    let title = "# 마크다운 헤더1\n\n";
    let summary = "**마크다운 문법**을 **HTML**로 변환하는 샘플 페이지\n";
    let content = "* JavaScript를 통해 쉽게 사용할 수 있다.";

	// div 요소에 마크다운 문법을 HTML로 변환하여 표시
    let element = document.getElementById('content');
    element.innerHTML = marked.parse(title+summary+content);
  </script>
</body>
  <div id="content"></div>
</html>