[javascript] Marked를 사용하여 마크다운 문서의 색상 테마를 변경하는 방법은?

30 Nov 2023

javascript

Marked에서는 다양한 색상 테마를 지원하며, 테마를 적용하려면 CSS 파일을 사용해야 합니다. 먼저, 원하는 색상 테마를 찾아서 다운로드하거나 직접 작성합니다.

다음으로, CSS 파일을 HTML 문서에 추가합니다. <head> 태그 내에 <link> 태그를 사용하여 CSS 파일을 연결합니다. 예시 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Marked 색상 테마 변경</title>
    <link rel="stylesheet" href="테마.css">
</head>
<body>
    <!-- 마크다운 내용 표시 -->
    <div id="content"></div>

    <!-- Marked 스크립트 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        // 마크다운 문서를 HTML로 변환해서 표시
        const markdownText = `# 제목\n\n본문 내용`;
        const html = marked(markdownText);
        document.getElementById('content').innerHTML = html;
    </script>
</body>
</html>

위 예시 코드에서 테마.css 부분을 원하는 테마의 CSS 파일로 대체하면 됩니다. 이제 해당 HTML 파일을 열어 보면 마크다운 내용이 선택한 색상 테마로 표시될 것입니다.

마크다운 문서의 색상 테마 변경은 Marked와 CSS 파일을 조합하여 손쉽게 할 수 있습니다. 마크다운 파일을 다양한 색상 테마로 변환하여 깔끔하고 보기 좋은 문서를 만들어보세요.