[javascript] Marked를 사용하여 마크다운 문서에 이미지 갤러리 기능을 추가하는 방법은?
먼저, Marked와 Lightbox를 HTML 파일에 추가합니다. 다음은 CDN을 통해 가져오는 예시입니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<div id="content"></div> <!-- 마크다운이 표시될 부분 -->
<script src="script.js"></script> <!-- 마크다운을 처리할 스크립트 -->
</body>
</html>
스크립트 파일 내에 다음과 같이 마크다운을 HTML로 변환하는 코드를 추가합니다.
// script.js
// 마크다운 문서
const markdown = `
`;
// 마크다운을 HTML로 변환하여 특정 요소에 삽입
const contentElement = document.getElementById('content');
contentElement.innerHTML = marked(markdown);
// 이미지 갤러리를 위한 설정
lightbox.option({
resizeDuration: 200,
wrapAround: true
});
위 코드에서는 마크다운 문서 내의 이미지 경로를 와 같이 작성하였습니다. 실제로 사용하는 이미지 파일의 경로로 변경해주셔야 합니다.
이후 HTML 파일을 열어 작성한 마크다운 문서의 이미지들이 갤러리로 표시되며, 클릭하면 확대되어 보여지는 것을 확인할 수 있습니다.
이렇게 Marked와 Lightbox를 함께 사용하여 마크다운 문서에 이미지 갤러리 기능을 추가할 수 있습니다.