1. Marked 설치하기:

   npm install marked
   

2. HTML 파일에 Marked 스크립트 추가하기:

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

3. 변환할 마크다운 파일을 읽고 변환하기 위한 코드 작성하기:

   // HTML에서 마크다운 컨텐츠를 표시할 엘리먼트 선택
   const markdownElement = document.getElementById('markdown-content');
      
   // 마크다운 파일을 가져올 HTTP 요청 보내기
   fetch('path/to/markdown-file.md')
     .then(response => response.text())
     .then(markdown => {
       // Marked를 사용하여 마크다운을 HTML로 변환
       const html = marked(markdown);
          
       // 변환된 HTML을 엘리먼트에 삽입
       markdownElement.innerHTML = html;
     });
   

   위 코드에서 ‘markdown-content’는 마크다운 컨텐츠를 표시할 HTML 엘리먼트의 id로 대체되어야 합니다. ‘path/to/markdown-file.md’는 실제 마크다운 파일의 경로로 대체되어야 합니다.

4. HTML 파일에서 변환된 마크다운 컨텐츠 표시하기:

   <div id="markdown-content"></div>
   

   이 코드는 변환된 마크다운 컨텐츠를 표시할 HTML 엘리먼트를 생성합니다. 아이디는 위의 JavaScript 코드에서 사용한 것과 동일해야 합니다.

이제 마크다운 파일을 실시간으로 변환하여 HTML로 표시할 수 있습니다. Marked는 다양한 옵션을 제공하므로 필요에 따라 사용하실 수 있습니다. 자세한 내용은 Marked 공식 문서를 참고하세요.