[javascript] Marked를 사용하여 마크다운 문서에 앵커(Anchor)를 추가하는 방법은?
Marked는 JavaScript로 작성된 마크다운 파서입니다. 이를 이용하여 마크다운 문서에 앵커(Anchor)를 추가하는 방법을 알아보겠습니다.
- Marked 설치하기
먼저, npm을 사용하여 Marked를 설치합니다. 아래의 명령어를 사용하세요.
npm install marked
- 앵커(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>
이제 마크다운으로 작성된 문서에 앵커를 추가할 수 있습니다.