마크다운으로 작성한 게시글에서 앵커 처리하기

제품 지원
2

안녕하세요, 오신 것을 환영합니다!

이 구문은 kramdown에서 나온 것인가요, 아니면 PHP Markdown Extra에서 나온 것인가요?

Discourse는 CommonMark 사양을 기반으로 한 MarkdownIt에 의존합니다. 헤더 ID를 지정하는 기능은 지원하지 않습니다.

언젠가 이에 대해 논의된 것 같습니다: Anchors in markdown - Spec - CommonMark Discussion, 하지만 명확한 결론을 찾지 못했습니다.

다만, Discourse는 자동으로 앵커를 생성합니다.
여기서 확인해 볼 수 있습니다:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-markdown-it/src/features/anchor.js

결론적으로, 다음과 같은 ID를 기대할 수 있습니다:

  • h-{headingId} (게시물 ID 없음, 슬러그 없음)
  • h-{slug}-{headingId} (게시물 ID 없음)
  • p-{postId}-h-{headingId} (게시물 ID 있음, 슬러그 없음)
  • p-{postId}-h-{slug}-{headingId} (게시물 ID, 슬러그 있음)

예시:

이미지는 HTML 코드 구문과 하이라이트된 요소(앵커 태그, 앵커 태그의 관련 값, CSS flex 속성, 의미론적으로 관련 있는 코드 구조 포함)를 보여주는 온라인 IDE의 상세한 인터페이스를 보여줍니다. (AI 캡션)
이미지는 HTML 코드 구문과 하이라이트된 요소(앵커 태그, 앵커 태그의 관련 값, CSS flex 속성, 의미론적으로 관련 있는 코드 구조 포함)를 보여주는 온라인 IDE의 상세한 인터페이스를 보여줍니다. (AI 캡션)865×308 23.1 KB

원하는 경우, HTML을 사용하여 수동으로 앵커를 만들 수도 있습니다. 예: <a name="anchor_name"></a>

이미지는 "Header" 텍스트 상자가 열려 있는 웹 브라우저 창을 보여줍니다. 상점에는 "<<" 뒤에 'Header'라는 HTML 코드가 포함되어 있습니다. (AI 캡션)
이미지는 "Header" 텍스트 상자가 열려 있는 웹 브라우저 창을 보여줍니다. 상점에는 "<<" 뒤에 'Header'라는 HTML 코드가 포함되어 있습니다. (AI 캡션)708×156 6.87 KB

이미지는 "header-1"으로 링크된 앵커 태그를 생성하는 HTML 코드를 보여줍니다. "name"과 "href" 속성이 각각 "p-704-a-nametestestast Header"와 "test"로 설정되어 있으며, 성능 모니터링과 관련된 웹페이지 내비게이션 인터페이스를 나타냅니다. (AI 캡션)
이미지는 "header-1"으로 링크된 앵커 태그를 생성하는 HTML 코드를 보여줍니다. "name"과 "href" 속성이 각각 "p-704-a-nametestestast Header"와 "test"로 설정되어 있으며, 성능 모니터링과 관련된 웹페이지 내비게이션 인터페이스를 나타냅니다. (AI 캡션)801×190 16.3 KB

추가 자료 –
목차를 생성해야 한다면 이 컴포넌트를 사용할 수 있습니다: