[javascript] Marked를 사용하여 자바스크립트 Markdown을 HTML로 변환하는 방법은?

30 Nov 2023

javascript

먼저, Marked 라이브러리를 다운로드하고 HTML 문서에 포함시킵니다. 다음은 Marked 라이브러리를 CDN을 통해 포함하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
  <div id="markdownContent"></div>

  <script>
    const markdownText = `
      # 제목1
      이것은 **마크다운**으로 작성된 *내용*입니다.
    `;
  
    const markdownContent = document.getElementById("markdownContent");
    markdownContent.innerHTML = marked(markdownText);
  </script>
</body>
</html>

위의 예제를 실행하면 # 제목1 이것은 마크다운으로 작성된 내용입니다.라는 HTML로 변환된 결과를 markdownContent라는 id를 가진 div 요소에 출력합니다.

Marked는 다양한 옵션을 가지고 있으며, 마크다운 문서를 HTML로 변환하는 기능 외에도 특정 옵션을 활용하여 코드 하이라이팅, 테이블 생성 등의 작업을 수행할 수 있습니다. 자세한 내용은 Marked의 공식 문서를 참고하시기 바랍니다.

참고 자료: