[javascript] Marked를 사용하여 마크다운 문서에 앵커(Anchor)를 추가하는 방법은?

Marked는 JavaScript로 작성된 마크다운 파서입니다. 이를 이용하여 마크다운 문서에 앵커(Anchor)를 추가하는 방법을 알아보겠습니다.

  1. Marked 설치하기

먼저, npm을 사용하여 Marked를 설치합니다. 아래의 명령어를 사용하세요.

npm install marked
  1. 앵커(Anchor) 추가하기

Marked를 사용하여 앵커를 추가하려면 다음과 같은 작업을 수행해야 합니다.

const marked = require('marked');

const renderer = new marked.Renderer();

renderer.heading = function (text, level, raw, slugger) {
    const anchor = slugger.slug(raw);
    return '<h' + level + ' id="' + anchor + '">' + text + '</h' + level + '>';
};

const markdown = '## 제목';

const html = marked(markdown, { renderer: renderer });

console.log(html);

위의 예제에서는 Marked의 Renderer를 사용하여 heading 메서드를 오버라이딩하여 앵커를 추가합니다. slugger.slug(raw)를 사용하여 텍스트를 슬러그화합니다. 마지막으로, marked 함수에 사용자 정의 Renderer를 전달하여 마크다운을 HTML로 변환합니다.

위의 예제에서는 ## 제목의 마크다운을 다음과 같은 HTML로 변환할 것입니다.

<h2 id="제목">제목</h2>

이제 마크다운으로 작성된 문서에 앵커를 추가할 수 있습니다.