[javascript] Marked를 이용하여 Markdown 파일을 웹 페이지에 렌더링하는 방법은?

30 Nov 2023

javascript

Marked 라이브러리를 다운로드하고 HTML 파일에 포함시킵니다.

<!DOCTYPE html>
<html>
<head>
  <title>Marked Example</title>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<h1>Markdown 렌더링 예제</h1>
<div id="markdownContent"></div>

<script>
  // Markdown을 HTML로 변환하는 함수
  function renderMarkdown(markdownText) {
    var html = marked(markdownText);
    document.getElementById("markdownContent").innerHTML = html;
  }

  // 렌더링할 Markdown 파일 가져오기
  fetch("example.md")
    .then(response => response.text())
    .then(text => renderMarkdown(text));
</script>
</body>
</html>

<div> 요소를 추가하여 Markdown 내용이 표시될 영역을 만듭니다. 이 예제에서는 <div id="markdownContent"></div>을 사용하였습니다.
renderMarkdown 함수를 사용하여 Markdown 텍스트를 HTML로 변환하고, 변환된 HTML을 <div> 요소에 적용합니다.
fetch를 사용하여 Markdown 파일을 가져온 후, renderMarkdown 함수를 호출하여 Markdown을 HTML로 변환하여 렌더링합니다. 이 예제에서는 “example.md”라는 파일을 가져오는 예제를 보여주었습니다. 실제로는 이 부분을 원하는 Markdown 파일 경로로 수정해야 합니다.

이렇게 하면 Marked를 사용하여 Markdown 파일을 웹 페이지에 렌더링할 수 있습니다. Marked는 헤더, 목록, 링크 등 Markdown의 다양한 기능을 지원하므로, 웹 페이지에서 사용자에게 보다 편리한 마크다운 뷰를 제공할 수 있습니다.