마크 다운의 상호 참조 (이름이 지정된 앵커)


511

다음에 해당하는 마크 다운 구문 이 있습니까?

Take me to <a href="#pookie">pookie</a>

... 

<a name="pookie">this is pookie</a>

답변:


691
Take me to [pookie](#pookie)

pookie라는 앵커 포인트로 이동하려면 올바른 마크 다운 구문이어야합니다.

해당 이름의 앵커 포인트를 삽입하려면 HTML을 사용하십시오.

<a name="pookie"></a>

Markdown은 앵커 포인트를 어디에 두어야하는지 신경 쓰지 않습니다. 그것을 넣을 수있는 유용한 장소는 헤더에 있습니다. 예를 들면 다음과 같습니다.

### <a name="tith"></a>This is the Heading

잘 작동합니다. (여기서 설명했지만 SO의 렌더러는 앵커를 제거합니다.)

자동 폐쇄 태그에와 주 id=name=

이 게시물의 이전 버전에서는 <a id='tith' />, XHTML의 자체 닫는 구문 사용 및 id대신 속성 사용을 제안했습니다 name.

XHTML을 사용하면 모든 태그를 '비어 있고'자체 닫을 수 있습니다. 즉, 본문이 비어있는 일치하는 태그 쌍의 <tag />줄임말 <tag></tag>입니다. 대부분의 브라우저는 XHTML을 허용하지만 일부는 허용하지 않습니다. 브라우저 간 문제를 방지하려면 <tag></tag>위에서 권장 한대로을 사용하여 명시 적으로 태그를 닫으십시오 .

마지막 name=으로이 속성 은 XHTML에서 더 이상 사용되지 않으므로 원래 id=는 모두가 인식하는을 사용했습니다 . 그러나 HTML5는 이제를 사용할 때 JavaScript에서 전역 변수를 생성하므로 id=반드시 원하는 것은 아닙니다. 따라서 사용 name=이 더 친숙해질 것입니다.

(덕분에 Slipp 더글러스 나 XHTML을 설명하고 못 박는 에서 HTML5의 부작용을 지적 - 의견 및 참조 못 박는대답을 자세히 위해. name=작업에 나타납니다 어디서나, 그것은 XHTML에서 더 이상 사용되지 않습니다하지만.)


1
HTML이 렌더링 된 후 <a> 태그 가 제거되어 StackOverflow가 HTML을 렌더링 한 후 제목 데모에 연결하는 방법을 볼 수 없습니다 . 즉, StackOverflow Markdown에서는 사용할 수 없습니다.
Slipp D. Thompson

2
그러나 이것은보다 일반적인 다른 Markdown 렌더러에서 작동하지만 닫는 <a> 태그 가 필요합니다 . <A> 태그는 자동 폐쇄를 허용하지 않습니다. 또한 <a> 태그가 헤더 내용 앞에 있지 않으면 브라우저가 헤더를 건너 뛰는 것을 발견했습니다 . 귀하의 예를 수정했습니다.
Slipp D. Thompson

2
카우보이. <a>href가없는 스타일링 이 없다고해서 자동 종료되는 것은 아닙니다. 내가 완전히 미쳐 버리지 않는 한, test-xhtml11 과 [ sln.6bitt.com/public/test-html5.html](test-html5) 둘 다 <a> 태그 내에서 나머지 페이지를 렌더링합니다. 계속해서 원하는 웹 검사기로 검사하십시오.
슬립 D. 톰슨

4
@ 슬립 : 좋아, 지금 이해한다고 생각합니다. 당신은 코딩 <a id="hi"/> rest of doc했지만, 그것은처럼 취급되었습니다 <a id="hi"> rest of doc</a>. (그리고 페이지의 요소 분석에서도 이것을 보여줍니다.) 내 실수 : 나는 원시 소스가 아닌 표시된 요소를 보았습니다. 이 관찰에 비추어 답변을 수정해야한다고 생각하십니까?
Steve Powell

3
name속성은 전역 변수도 생성 하므로 ( stackoverflow.com/questions/3434278/… 참조 ) id의도 한대로 조각 식별자 URL의 대상으로 속성을 사용할 수도 있습니다 .
Bobby Jack

92

bitbucket.org에서는 투표 솔루션이 작동하지 않습니다. 대신 헤더 (##)를 사용하는 경우 헤더 앞에 # markdown-header-my-header-name을 붙여 앵커로 참조 할 수 있습니다. 여기서 # markdown-header-는 렌더러에서 생성 된 암시 적 접두사입니다. 나머지는 공백을 대체하는 대시가있는 소문자 헤더 제목입니다.

## My paragraph title

이와 같은 암시 적 앵커를 생성합니다

#markdown-header-my-paragraph-title

각 앵커 참조 앞의 전체 URL은 선택 사항입니다.

[Some text](#markdown-header-my-paragraph-title)

~에 해당

[Some text](https://bitbucket.org/some_project/some_page#markdown-header-my-paragraph-title) 

그들이 같은 페이지에 있다면.

출처 : https://bitbucket.org/tutorials/markdowndemo/overview (이 .md 파일의 출처를 편집하고 앵커가 어떻게 만들어 지는지 살펴보십시오).


1
이것은 또한 할 수 있습니다. confluence.atlassian.com/bitbucket/… 에 따르면 bitbucket은 문서 헤더를 기반으로 링크 앵커를 자동 생성 할 수있는 목차 확장을 지원합니다 . TOC 확장자는 여기에 문서화되어 있습니다. pythonhosted.org/Markdown/extensions/toc.html "[TOC]"텍스트를 문서의 시작 부분에 추가하여 생성하십시오.
이진 Phile

8
Github ## My paragraph title에서 다음 앵커를 생성 user-content-my-paragraph-title하므로 [일부 텍스트] (# user-content-my-paragraph-title)로 참조 할 수 있습니다. 그러나 이에 대한 공식적인 문서를 찾지 못했습니다.
toto_tico

이것은 Bitbucket에서도 도움이되었습니다. 매력처럼 작동합니다.
Scott Byers

1
유용한 정보입니다. 감사합니다. 그러나 확장명이없는 마크 다운 렌더러는 이러한 앵커를 생성하지 않으므로 제목 이름이 충돌하면 앵커 ID가 충돌합니다 (또는 숫자로 충분하지 않은 도움이되는 구별되는 트릭). 명시 적 앵커 ID는 텍스트 업데이트 (위의 트릭 참조)로 인해 무작위로 변경되지 않고 더 우수하고 제어 가능하며 헤더 이상의 앵커링에 유용합니다. 두 기술 모두 일반적으로 필요합니다.
Steve Powell

stackedit.io [linky](#header) 충분한 앵커했다, 너무, 요점에 게시 할 때했다.
Felipe Alvarez

67

를 사용하십시오 name. 가 사용하는 idHTML 5에서 필요하지 않으며 자바 스크립트에서 전역 변수를 생성합니다

HTML 5 스펙을 참조하십시오 조각 식별자 5.9.8 탐색을 - 모두 idname사용된다.

대부분의 브라우저는 여전히 ID를 전역 변수로 바꾼다 는 것을 알아야 합니다 . 다음 은 빠른 테스트 입니다. name전역을 사용 하면 발생할 수있는 전역 및 충돌이 발생하지 않습니다.

이름을 사용하는 예 :

Take me to [pookie](#pookie)

그리고 목적지 앵커 :

### <a name="pookie"></a>Some heading

5
다운 보팅. 어쨌든 JS에서 전역 변수를 직접 정의해서는 안되므로 전역 변수 인수가 약하므로 충돌이 발생하지 않습니다. 또한의 의미 nameid다릅니다.
Marnen Laibow-Koser

9
@ MarnenLaibow-Koser 아무도 JS에서 전역 변수를 정의하는 것에 대해 이야기하고 있지 않습니다. HTML로 ID를 만들면 대부분의 브라우저에서 전역 window.someid가 생성됩니다.
mikemaccana

14
@ MarnenLaibow-Koser 많은 라이브러리 (예 : 자신의 JS가 아니라 다른 사람의 라이브러리)는 단일 전역 (예 : fineuploader)을 사용합니다. ID가 fineuploader인 요소를 만들면 fineuploader모듈 을 사용할 수 없습니다 . 불필요한 전역을 만들지 않으면 이러한 충돌을 피할 수 있습니다.
mikemaccana

5
해당 사례에 대한 테스트를 실행하고 어느 테스트가 우선하는지 알고 싶습니다. 이론적 인 문제에 감사하지만 수년간의 클라이언트 측 개발에서 클라이언트 측 JS가 ID를 깨뜨린 적이 없었습니다 (HTML이 유효하다면). 실제 문제가 발생할 때까지 의미 적으로 적절할 때 계속 사용합니다.
Marnen Laibow-Koser

2
@ MarnenLaibow-Koser I (및 다른 많은 사람들)은 HTML ID가 실제 JavaScript를 깨뜨 렸습니다. 답장하는 의견에는 매우 실용적인 예가 있습니다! 싱글 톤에도 클래스를 사용하는 많은 스타일 가이드와 회사가 있습니다. 이것이 바로 그 이유입니다.
mikemaccana

17

마크 다운 앵커 는 해시 마크를 지원하므로 페이지의 앵커에 대한 링크는 다음과 같습니다.[Pookie](#pookie)

앵커 생성은 실제로 Gruber Markdown에서 지원되지 않지만 Markdown Extra 와 같은 다른 구현에서는 지원됩니다 .

Markdown Extra에서 앵커 ID는로 헤더 또는 부제목에 추가됩니다 {#pookie}.

Git 리포지토리 페이지의 Github Flavored Markdown (Gists 아님)은 다음을 포함 하여 모든 헤더 (h1, h2, h3 등)에 여러 태그 태그가있는 앵커자동으로 생성합니다 .

  • id="user-content-HEADERTEXT"
  • class="anchor"
  • href="#HEADERTEXT"
  • aria-hidden="true" (마우스 오버시 표시되는 svg 링크 아이콘 용)

aria / svg 아이콘을 제외하고 다음과 같이 씁니다.

  • # Header Title

Github는 다음을 생성합니다.

  • <h1><a id="user-content-header-title" class="anchor" href="#header-title">Header Title</a></h1>

따라서 헤더 링크를 만들 필요가 없으며 항상 다음을 사용하여 연결할 수 있습니다.

  • 에 연결 [Header Title](#header-title)

16

원래 Markdown 구문에서이 작업을 수행하는 데 사용할 수있는 구문은 없지만 Markdown Extra 는 최소한 ID를 헤더에 할당 할 수있는 방법을 제공합니다. 그런 다음 쉽게 연결할 수 있습니다. 또한 Markdown 및 Markdown Extra 둘 다에서 일반 HTML을 사용할 수 있으며 name속성이 id최신 버전의 HTML에서 속성 으로 대체되었습니다 .


9

GitBook에서이 문제에 대한 해결책을 찾는 사람이라면 누구나 가능합니다. 이것이 내가 GitBook에서 작동하게하는 방법입니다. 다음과 같이 헤더에 명시 적으로 태그를 지정해야합니다.

# My Anchored Heading {#my-anchor}

그런 다음이 앵커에 연결하십시오.

[link to my anchored heading](#my-anchor)

솔루션 및 추가 예는 https://seadude.gitbooks.io/learn-gitbook/ 에서 찾을 수 있습니다.


감사! 이 작동합니다! 이것은 upvoted해야합니다!
덱스터

최고의 답변! 감사합니다
invis

7

파티에 늦었지만이 추가 기능은와 함께 일하는 사람들에게 유용 할 수 있다고 생각합니다 rmarkdown. 여기 rmarkdown에는 문서의 헤더에 대한 참조가 기본적으로 지원됩니다.

에 의해 정의 된 모든 헤더

# Header

에 의해 참조 될 수있다

get me back to that [header](#header)

다음은 .rmd이 동작을 보여주는 최소 독립 실행 형 파일입니다. 그것은에 니트 수 .pdf.html.

---
title: "references in rmarkdown"
output:
  html_document: default
  pdf_document: default
---

# Header

Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. Write some more text. 

Go back to that [header](#header).

4

최신 마크 다운을 사용하면 다음 구문을 사용할 수 있습니다.

[](){:name='anchorName'}

다음 HTML을 만들어야합니다.

<a name="anchorName"></a>

앵커에 텍스트가 포함되도록하려면 간단히 대괄호 안에 앵커 텍스트를 추가하십시오.

[Some Text](){:name='anchorName'}


Maruku이 구문에 대해서만 아는 것 같습니다 . babelmark를 참조하십시오.
Ulysse BN

3

가장 일반적인 마크 다운 생성기. 각 헤더에는 간단한 자체 생성 앵커가 있습니다. 예를 들어 pandoc 의 경우 생성 된 앵커는 헤더의 케밥 케이스 슬러그입니다.

 echo "# Hello, world\!" | pandoc
 # => <h1 id="hello-world">Hello, world!</h1>

사용하는 markdown 파서에 따라 앵커가 변경 될 수 있습니다 (Symbolrush 및 La muerte Peluda의 예를 들자면 서로 다릅니다!). markdown 구현에 따라 생성 된 앵커를 볼 수있는 이 babelmark 를 참조하십시오 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.