[javascript] Marked에서 자동 목차 생성 기능은 어떻게 사용하나요?

Marked는 Markdown 형식의 텍스트를 HTML로 변환해주는 라이브러리입니다. 이 라이브러리를 사용하여 Markdown 파일을 HTML로 변환할 때, 자동으로 목차를 생성하는 기능을 사용할 수 있습니다.

Marked에서 자동 목차를 생성하기 위해서는 몇 가지 단계를 거쳐야 합니다.

  1. toc 옵션을 설정하여 목차를 생성하도록 설정합니다. 이 옵션은 true로 설정되어야 합니다.
var marked = require('marked');

var text = `
# 제목 1
## 제목 2
### 제목 3
`;

var options = {
  gfm: true,
  toc: true,
};

var html = marked(text, options);

console.log(html);
  1. Markdown 파일에는 목차를 생성할 제목을 입력해야 합니다. Marked에서는 제목 수준에 따라서 목차의 구조가 결정됩니다.

위의 예제에서는 #, ##, ### 등을 사용하여 제목을 작성했습니다. 이렇게 작성된 제목들을 Marked가 자동으로 인식하여 목차를 생성합니다.

  1. 변환된 HTML에서 목차를 나타내는 특정 부분을 선택하고 나타내는 방식을 지정해야 합니다. 일반적으로 목차는 ul 태그로 나타내고, 각 항목들은 li 태그로 구성됩니다.
var marked = require('marked');

var text = `
# 제목 1
## 제목 2
### 제목 3
`;

var options = {
  gfm: true,
  toc: true,
};

// 변환된 HTML에서 목차를 선택하고 나타내는 방식을 지정합니다
options.renderer = new marked.Renderer();
options.renderer.heading = function (text, level, raw) {
  return `<h${level} id="toc_${text}">${text}</h${level}>\n`;
};

var html = marked(text, options);

console.log(html);

위의 예제에서는 options.renderer 객체를 생성하여 heading 함수를 재정의하고 있습니다. 재정의된 heading 함수는 각 제목에 고유한 id 값을 할당하여 목차를 나타내는 ul 태그로 반환합니다.

위의 예제를 실행하면 Markdown 파일에서 작성한 제목들에 해당하는 목차를 생성한 HTML 코드를 출력할 수 있습니다.