먼저, HTML 파일에서 Marked를 로드하기 위해 다음 스크립트 태그를 추가합니다.

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

다음으로, 마크다운 입력을 받을 textarea 엘리먼트와 실시간 미리보기를 보여줄 div 엘리먼트를 만듭니다.

<textarea id="markdown-input" rows="10"></textarea>
<div id="preview"></div>

다음으로, JavaScript 코드를 이용하여 실시간 미리보기를 갱신하는 기능을 구현합니다. textarea의 입력값이 변경될 때마다 Marked를 사용하여 렌더링한 결과를 preview 엘리먼트에 넣어주면 됩니다.

var markdownInput = document.getElementById('markdown-input');
var preview = document.getElementById('preview');

markdownInput.addEventListener('input', function() {
  var markdownText = markdownInput.value;
  var html = marked(markdownText);
  preview.innerHTML = html;
});

이제 마크다운 입력을 하는 textarea에서 텍스트를 입력하면 실시간으로 미리보기가 업데이트됩니다.

이 예제를 기반으로 본인의 웹페이지에 실시간 미리보기 기능을 추가해보세요. Marked 모듈의 풍부한 기능을 활용하여 보다 다양한 미리보기 환경을 만들 수 있습니다.