Markdown의 제목에 사용자 지정 앵커 추가 - Eleventy

앵커는 동일한 페이지에서 내부적으로 id 속성을 사용하여 요소에 링크하기 위해 요소에 적용되는 href 속성일 뿐입니다.

기본적으로 11ty은 markdown-it 라이브러리를 사용하여 마크다운을 구문 분석합니다. 그러나 기본적으로 markdown-it는 헤더 요소에 id를 적용하는 구문을 지원하지 않는 것 같습니다.

사용자 정의id를 markdown의 헤더 요소에 적용하는 구문은 다음과 같습니다.

## text {#id}

해당 구문이 작동하도록 하려면 markdown-it 라이브러리의 자체 인스턴스를 만들고 markdown-it-anchors 및 markdown-it-attrs 플러그인 두 개를 추가해야 합니다.
markdown-it-anchors 플러그인은 표제 텍스트에 따라 기본id을 마크업의 모든 헤더 요소에 자동으로 적용합니다.
markdown-it-attrs 플러그인은 기본값id을 지정한 사용자 지정id으로 바꿉니다.

사용자 지정 앵커 적용

필요한 종속 항목을 설치합니다.

npm i markdown-it markdown-it-anchor markdown-it-attrs

.eleventy.js 파일 내부에 필요합니다.

const markdownIt = require('markdown-it');
const markdownItAnchor = require('markdown-it-anchor');
const markdownItAttrs = require('markdown-it-attrs');

markdown-it 함수 내부에 module.exports 라이브러리의 인스턴스를 만듭니다.

eleventyConfig.setLibrary("md", markdownIt().use(markdownItAnchor)).use(markdownItAttrs)

다음과 같은 몇 가지 옵션을 추가할 수도 있습니다.

let markdownItOptions = {
    html: true // you can include HTML tags
}

let markdownItAnchorOptions = {
    level: 2 // minimum level header -- anchors will only be applied to h2 level headers and below but not h1
}

eleventyConfig.setLibrary("md", markdownIt(markdownItOptions).use(markdownItAnchor, markdownItAnchorOptions).use(markdownItAttrs))

이제 다음과 같이 하면

## Heading 1 {#head1}

이 경우 head1는 이 헤더 요소의 id가 됩니다. #head1 값으로 href를 사용하여 이 요소에 연결할 수 있습니다. 이것이 제목 요소에 사용자 정의 앵커를 추가하는 방법입니다.

기본 앵커 적용

사용자 지정id을 원하지 않고 id 플러그인에 의해 요소에 적용되는 기본값markdown-it-anchors을 유지하려는 경우 markdown-it-attrs 플러그인을 제거하면 기본 앵커가 적용됩니다. 요소.

eleventyConfig.setLibrary("md", markdownIt(markdownItOptions).use(markdownItAnchor, markdownItAnchorOptions))

지금은 여기까지입니다. 종료합니다.

This post was originally published in Syntackle