[javascript] Marked를 사용하여 마크다운 문서의 단락을 접기/펼치기 기능을 추가하는 방법은?

30 Nov 2023

javascript

Marked는 JavaScript로 작성된 마크다운 파서 라이브러리로, 마크다운 문서를 HTML로 변환하는 기능을 제공합니다. 이 라이브러리를 사용하여 마크다운 문서의 단락을 접기/펼치기 기능을 추가할 수 있습니다.

먼저 Marked 라이브러리를 다운로드하고 HTML 파일에 포함시킵니다. 그런 다음, 다음과 같이 HTML을 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>마크다운 문서의 단락 접기/펼치기 기능</title>

    <!-- Marked 라이브러리 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

    <style>
        /* 접혀진 단락의 스타일 */
        .collapsed {
            display: none;
        }
    </style>
</head>
<body>
    <h1>마크다운 문서의 단락 접기/펼치기 기능</h1>

    <!-- 마크다운 문서 -->
    <textarea id="markdown" rows="10" cols="50">
# 제목

1. 첫 번째 단락
2. 두 번째 단락
3. 세 번째 단락
    </textarea>

    <!-- 변환된 HTML을 표시할 컨테이너 -->
    <div id="output"></div>

    <script>
        var markdownTextarea = document.getElementById('markdown');
        var outputContainer = document.getElementById('output');

        // 마크다운 문서 변환 및 표시 함수
        function renderMarkdown() {
            var markdown = markdownTextarea.value;
            var html = marked(markdown);
            outputContainer.innerHTML = html;
        }

        // 단락의 접기/펼치기 토글 함수
        function toggleParagraph(paragraph) {
            paragraph.classList.toggle('collapsed');
        }

        // 변환된 HTML에 토글 버튼 요소 추가
        function addToggleButtons() {
            var paragraphs = outputContainer.querySelectorAll('p');
            paragraphs.forEach(function(paragraph) {
                var toggleButton = document.createElement('button');
                toggleButton.innerText = 'Toggle';
                toggleButton.addEventListener('click', function() {
                    toggleParagraph(paragraph);
                });
                paragraph.appendChild(toggleButton);
            });
        }

        markdownTextarea.addEventListener('input', function() {
            renderMarkdown();
            addToggleButtons();
        });

        renderMarkdown();
        addToggleButtons();
    </script>
</body>
</html>

위의 코드를 실행하면, 마크다운 문서의 단락을 펼치거나 접을 수 있는 토글 버튼이 추가된 HTML이 표시됩니다. 버튼을 클릭하여 단락을 확장하거나 축소할 수 있습니다.

이 예시에서는 Marked와 간단한 JavaScript 코드를 사용하여 단락의 접기/펼치기 기능을 구현했습니다. 필요에 따라 스타일을 수정하거나 추가적인 기능을 구현할 수 있습니다.