[javascript] Marked를 사용하여 마크다운 문서에 댓글 기능을 추가하는 방법은?

30 Nov 2023

javascript

먼저, Marked를 다운로드하고 HTML 파일에 포함시켜야 합니다. Marked는 CDN에서 가져오거나, 다운로드해서 로컬에 저장한 후에 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <title>마크다운 댓글 추가</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <textarea id="markdownInput" placeholder="마크다운을 입력하세요" rows="10" cols="80"></textarea>
    <button onclick="convertMarkdown()">변환</button>
    <div id="markdownOutput"></div>

    <script>
        function convertMarkdown() {
            let input = document.getElementById("markdownInput").value;
            let output = marked(input);
            document.getElementById("markdownOutput").innerHTML = output;
        }
    </script>
</body>
</html>

위의 예제를 보면, textarea에 마크다운을 입력하고 “변환” 버튼을 클릭하면, 입력한 마크다운이 Marked를 사용하여 HTML로 변환되어 #markdownOutput 요소에 표시됩니다.

이제 HTML 문서에 댓글 기능을 추가하기 위해, 원하는 댓글 시스템을 사용하면 됩니다. 대부분의 댓글 시스템은 원하는 위치에 JavaScript 코드 스니펫을 삽입하여 댓글 기능을 구현할 수 있습니다. 이 코드 스니펫은 특정 요소에 댓글 폼을 생성하고, 댓글을 저장하고 표시하는 기능을 포함합니다.

댓글 시스템을 사용할 때, 마크다운을 HTML로 변환된 상태에서 댓글을 저장하고 표시해야 하므로, 위의 예제에서 마크다운을 HTML로 변환하는 marked() 함수를 사용하여 마크다운을 HTML로 변환한 후에 댓글 시스템과 연동하면 됩니다.

위의 예제는 단순히 마크다운을 HTML로 변환하기만 하는 기능이지만, 마크다운 문서에 댓글 기능을 추가하는 데 필요한 기본 개념과 방법을 이해하는 데 도움이 될 것입니다. 실제로 사용할 댓글 시스템에는 해당 댓글 시스템의 문서를 참조하여 구체적인 방법을 따라야 합니다.