마크다운은 간단하고 가독성이 높은 문서를 작성하기 위한 경량 마크업 언어입니다. Marked는 자바스크립트 기반의 마크다운 해석기로, 마크다운 문법을 HTML로 변환해주는 역할을 합니다. 이번 블로그 포스트에서는 Marked를 사용하여 마크다운 뷰어를 만들어보겠습니다.

Marked 설치하기

Marked는 npm(Node Package Manager)을 통해 설치할 수 있습니다. 다음 명령어로 Marked를 설치합니다.

npm install marked --save

HTML에 Marked 연동하기

Marked를 사용하기 위해서는 HTML 파일에 Marked 라이브러리를 연동해야 합니다. 다음과 같이 스크립트 태그를 추가합니다.

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

Markdown 문서를 HTML로 변환하기

Marked는 marked() 함수를 제공합니다. 이 함수를 사용하여 마크다운 문서를 HTML로 변환할 수 있습니다. 다음은 변환 예시입니다.

let markdownText = '# 제목\n\n본문입니다.';
let convertedHTML = marked(markdownText);
console.log(convertedHTML);

위 코드를 실행하면 다음과 같은 HTML 코드가 출력됩니다.

<h1>제목</h1>
<p>본문입니다.</p>

Viewer 뷰어 만들기

이제 변환한 HTML 코드를 화면에 표시해주는 뷰어를 만들어보겠습니다. HTML 파일에 스타일 및 뷰어를 표시할 영역을 추가합니다.

<style>
    .markdown-viewer {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
    }
</style>

<div id="viewer" class="markdown-viewer"></div>

다음으로 자바스크립트 코드를 작성하여 마크다운 문서를 뷰어에 표시합니다.

let markdownText = '# 제목\n\n본문입니다.';
let convertedHTML = marked(markdownText);
document.getElementById('viewer').innerHTML = convertedHTML;

위 코드를 실행하면 viewer라는 id를 가진 엘리먼트에 마크다운 문서가 HTML로 변환되어 표시됩니다.

결론

Marked를 사용하여 마크다운 뷰어를 만드는 방법을 알아보았습니다. Marked는 간편하게 마크다운을 HTML로 변환할 수 있기 때문에 마크다운 문서를 보기 위한 뷰어나 블로그 등에서 많이 사용됩니다. Marked의 자세한 사용 방법은 공식 문서를 참고하시기 바랍니다.

• Marked 공식 문서