[javascript] Marked를 사용하여 마크다운 문서에 목차를 추가하는 방법은?

30 Nov 2023

javascript

먼저, Marked를 다운로드하고 HTML 문서에 스크립트를 추가합니다.

<script src="path/to/marked.js"></script>

다음으로, 목차를 추가할 마크다운 문서를 가져옵니다. 마크다운 문서를 HTML로 변환하기 위해 marked() 함수를 사용합니다.

var markdownText = `
# 제목 1
## 제목 1-1
### 제목 1-1-1
## 제목 1-2
# 제목 2
## 제목 2-1
`;

var htmlText = marked(markdownText);

이제 변환된 HTML 문서에 목차를 추가해야 합니다. 먼저, 변환된 HTML을 DOM으로 파싱합니다.

var parser = new DOMParser();
var doc = parser.parseFromString(htmlText, "text/html");

목차를 추가할 div 요소를 생성합니다.

var tocDiv = document.createElement("div");
tocDiv.id = "toc";

마크다운 문서의 모든 제목 요소(h1, h2, h3, 등)를 선택하고 순회하면서 목차를 생성합니다.

var headings = doc.querySelectorAll("h1, h2, h3, h4, h5, h6");

for (var i = 0; i < headings.length; i++) {
  var heading = headings[i];
  var link = document.createElement("a");
  link.href = "#" + heading.id;
  link.textContent = heading.textContent;

  tocDiv.appendChild(link);
}

마지막으로, 목차를 HTML 문서에 추가합니다.

document.body.insertBefore(tocDiv, doc.firstChild);

이제, 마크다운 문서에 목차가 추가되었습니다.

참고 자료: