[javascript] Marked를 사용하여 프리젠테이션 도구로 마크다운을 활용하는 방법은?

30 Nov 2023

javascript

Marked는 자바스크립트 기반의 마크다운 렌더링 엔진입니다. 이를 사용하여 마크다운 문서를 HTML로 변환하고 슬라이드 쇼 형식으로 표시할 수 있습니다. 아래는 Marked를 사용하여 마크다운 프리젠테이션을 만드는 예시입니다.

먼저, Marked를 다운로드하고 HTML 파일에 포함시킵니다.

<!DOCTYPE html>
<html>
<head>
    <title>마크다운 프리젠테이션</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/marked/marked.min.js">
    <style>
        /* 슬라이드 쇼 스타일 */
        .slide {
            display: none;
        }
    </style>
</head>
<body>
    <div id="presentation"></div>

    <script>
        // 마크다운 파일을 HTML로 렌더링하는 함수
        function renderMarkdownToHtml(markdown) {
            const html = marked(markdown);

            document.getElementById('presentation').innerHTML = html;
        }

        // 마크다운 파일을 가져와서 렌더링하는 함수
        function loadMarkdownFile() {
            const xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    renderMarkdownToHtml(xhr.responseText);
                }
            };
            xhr.open('GET', 'presentation.md', true);
            xhr.send();
        }

        // 슬라이드 쇼 시작
        function startSlideshow() {
            const slides = document.getElementsByClassName('slide');

            let currentSlideIndex = 0;
            slides[currentSlideIndex].style.display = 'block';

            setInterval(() => {
                slides[currentSlideIndex].style.display = 'none';
                currentSlideIndex = (currentSlideIndex + 1) % slides.length;
                slides[currentSlideIndex].style.display = 'block';
            }, 5000); // 슬라이드 전환 간격 설정
        }

        // 마크다운 파일 로드 후 슬라이드 쇼 시작
        loadMarkdownFile();
        window.onload = startSlideshow;
    </script>
</body>
</html>

위의 예시에서는 Marked 라이브러리를 CDN을 통해 가져온 뒤, 마크다운 파일을 로드하여 HTML로 변환하는 함수를 구현하였습니다. 슬라이드 쇼는 setInterval을 사용하여 일정 간격으로 슬라이드를 전환합니다.

이제 HTML 파일과 함께 마크다운 프리젠테이션의 내용을 담은 presentation.md 파일을 만들어보세요. 그리고 이 HTML 파일을 실행시키면 프리젠테이션이 시작됩니다.

이처럼 Marked를 사용하여 마크다운을 활용하는 것은 간단하면서도 효과적인 방법입니다. Marked는 다양한 설정과 기능을 제공하므로 필요에 따라 커스터마이징할 수 있습니다. 자세한 사용법은 Marked의 공식 문서를 참고해보시기 바랍니다.

참고 문서:

Marked 공식 문서