[javascript] Marked를 사용하여 TOC(테이블 오브 컨텐츠)를 생성하는 방법은?

30 Nov 2023

javascript

마크다운에서 TOC(테이블 오브 컨텐츠)를 생성하는 것은 문서의 내용을 구성하고 탐색하는데 도움이 됩니다. Marked.js는 마크다운을 HTML로 변환하는 데 사용되는 라이브러리인데, 이를 사용하여 TOC를 생성할 수 있습니다.

아래는 Marked를 사용하여 TOC를 생성하는 예제입니다.

const marked = require('marked');

// 마크다운 문서
const markdownString = `
# 제목 1
## 제목 2
### 제목 3

내용 1

#### 제목 4
내용 2

## 제목 2

내용 3
`;

// TOC를 생성하는 함수
function generateTableOfContents(markdownString) {
  const renderer = new marked.Renderer();
  const toc = [];

  renderer.heading = function (text, level, raw) {
    const anchor = this.options.headerPrefix + raw.toLowerCase().replace(/[^\w]+/g, '-');
    toc.push({
      level: level,
      anchor: anchor,
      text: text
    });

    return `<h${level}><a id="${anchor}" href="#${anchor}">${text}</a></h${level}>`;
  };

  const htmlString = marked(markdownString, { renderer: renderer });
  const tocHTML = generateTocHTML(toc);

  return {
    htmlString: htmlString,
    tocHTML: tocHTML
  };
}

// TOC를 HTML로 변환하는 함수
function generateTocHTML(toc) {
  let tocHTML = '<ul>';

  toc.forEach(item => {
    const indent = '&nbsp;&nbsp;'.repeat(item.level - 1);
    tocHTML += `<li>${indent}<a href="#${item.anchor}">${item.text}</a></li>`;
  });

  tocHTML += '</ul>';

  return tocHTML;
}

// TOC 생성하기
const { htmlString, tocHTML } = generateTableOfContents(markdownString);

console.log('변환된 HTML:', htmlString);
console.log('TOC:', tocHTML);

위의 코드에서는 Marked.js 라이브러리를 사용하여 제목(heading) 요소를 찾고, 각 제목에 대한 앵커(anchor)와 텍스트(text) 정보를 추출합니다. 그리고 해당 제목 요소에 앵커를 추가하고, TOC를 구성하기 위한 배열(toc)에 정보를 추가합니다.

마지막으로, TOC를 HTML로 변환하는 함수(generateTocHTML)를 사용하여 TOC를 생성하고, 변환된 HTML과 TOC를 반환합니다.

간단한 마크다운 문서를 사용하여 위의 코드를 실행하면, 변환된 HTML과 TOC가 콘솔에 출력됩니다. 이를 활용하여 웹 애플리케이션이나 블로그에서 TOC를 표시할 수 있습니다.

참고 자료: