Markdown에서 페이지의 일부 (예 : #some_id)에 연결하는 가장 좋은 방법은 무엇입니까?


127

Markdown으로 페이지의 다른 영역을 참조하는 방법을 찾으려고합니다. 추가하면 작동시킬 수 있습니다.

<div id="mylink" /> 

그리고 링크를 위해 :

[My link](#mylink)

그러나 내 생각에 Markdown에서 직선 div태그 를 사용하지 않는 인 페이지 링크를 수행하는 다른 방법이 있다고 생각 합니다.

어떤 아이디어?


난 항상 네가 여기서 한 방식대로 해왔 어
Joe Martinez

1
<div/>나머지 페이지의 포맷터를 화나게 할 수 있습니다. 사용하십시오 <a id="ident"/>. 내 대답을 참조하십시오.
Steve Powell


대신 MultiMarkdown을 사용하십시오. [anchor][]이를 수행 하는 구문을 제공합니다 . github.com/fletcher/MultiMarkdown/wiki/…
jwpfox

답변:


165

이 답변을 참조하십시오 .

요약하면

<a name="sometext"></a>

마크 다운 마크 업의 아무 곳에 나 삽입 (예 : 헤더) :

## heading<a name="headin"></a>

마크 다운 링크를 사용하여 링크하십시오.

[This is the link text](#headin)

또는

[some text](#sometext)

사용하지 마십시오 <div>-많은 렌더러의 레이아웃이 엉망이됩니다.

( 위로 변경 id=했습니다 name=. 지루한 설명 은 이 답변 을 참조하십시오 .)


7
+1 감사합니다. 이 작업을 자동으로 수행하지 않는 것은 슬픈 일입니다. 매우 젖은 IMHO.
Marc-André Lafortune

그것은, 당신은 텍스트 편집기에서 읽을 때 추한하지만, 하지 작업. 이것이 왜 대답이 아닌지 잘 모르겠습니다.
kayleeFrye_onDeck

구식 앵커를 정의하는 <a name="..." />것은 더 이상 사용되지 않지만 이후의 HTML 사양에서 준수 합니다. <div>방해 블록으로 렌더링 될 수 있다면 (공개되지 않은 이유로 CSS가 크기를 제공하는 경우) 어쩌면 <span>(인라인 요소) 트릭을 수행 할 수 있습니까?
Javier

25

나는 이것이 마크 다운에서 HTML을 생성하는 데 사용하는 것에 달려 있다고 생각합니다. jekyll (기본적으로 gihub.io 페이지에서 사용됨)은 생성 된 html의 제목에 id = ""속성을 자동으로 추가합니다.

예를 들어 마크 다운 인 경우

My header
---------

결과 HTML은 다음과 같습니다.

<h2 id="my-header">My header</h2>

그래서 당신은 단순히 그것에 의해 연결할 수 있습니다 [My link](#my-header)


이것이 가장 깨끗하고 정답입니다. 마크 다운은 정말 멋지다. 정말 빠른 블로깅을하는 데 도움이됩니다. ^ _ ^
Ashok MA

16

으로 마크 다운의 PHP 버전 설명 된대로, 당신은 또한, 다음 중 하나와 같은 구문을 사용하여 페이지 내에서 조각 식별자 헤더를 연결할 수 있습니다 여기에

Header 1            {#header1}
========

## Header 2 ##      {#header2}

그리고

[Link back to header 1](#header1)
[Link back to header 2](#header2)

불행히도이 구문은 현재 헤더에만 지원되지만 최소한 목차를 만드는 데 유용 할 수 있습니다.


3

HTML 페이지에서 링크의 대상 앵커는 id속성 이있는 요소 일 수 있습니다 . W3C 사이트의 링크 를 참조하십시오 . 관련 섹션에서 인용 한 내용은 다음과 같습니다.

HTML 문서의 대상 앵커는 A 요소 (이름 특성으로 이름 지정) 또는 다른 요소 (id 특성으로 이름 지정)로 지정할 수 있습니다.

Markdown은 HTML을 HTML로 처리하므로 ( 인라인 HTML 참조 ) 원하는 요소에서 조각 식별자를 만들 수 있습니다. 예를 들어 단락에 연결하려면 단락을 단락 태그로 묶고 ID를 포함하십시오.

<p id="mylink">Lorem ipsum dolor sit amet...</p>

그런 다음 표준 마크 다운 [My link](#mylink)을 사용하여 조각 앵커에 대한 링크를 만듭니다. 추가 마크 업이 필요 없으므로 HTML을 깨끗하게 유지하는 데 도움이됩니다.


<p>Markdown 에서 태그를 사용한 경험 에서 일반 단락의 CSS를 제거 할 수 있습니다. 나는 조심스럽게 사용한다고 말하고 싶습니다. Markdown을 처음 사용하지만 약간의 단점이 있습니다.
2rs2ts

@ user691859 " <p>Markdown 에서 태그를 사용하면 일반 단락의 CSS를 제거 할 수 있습니다 "라는 것이 무슨 의미인지 잘 모르겠습니다 . 마크 다운은 단락을 <p>태그로 묶고 이미 태그 가있는 단락은 무시 <p>합니다. 이것이 CSS에 어떤 영향을 미치는지 알 수 없습니다 ...
Mike

그 행동은 나에게 불규칙하다. tumblr에서 <p>를 사용하면 지정한 특정 동작 외에 모든 동작을 제거 할 수 있습니다 (항상 그런 것은 아님). 이유를 모르겠습니다. <div> 항상 동일합니다.
2rs2ts

3

누구나 TFS (Visual Studio Team Foundation Server) 2015를 사용하는 사람이라면 적어도 헤더에 포함 된 요소 <a><div>요소를 좋아하지 않습니다 . 또한 헤더의 이모티콘을 좋아하지 않습니다.

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

번역 :

<h3 id="-configuration-">🔧 Configuration 🔧</h3>
<p>Lorem ipsum problem fixem.</p>

그리고 링크가 그 중 하나를 사용해야하므로 id(파괴 된 비주얼 스튜디오와 다른 미리보기 확장) 또는 이모티콘을 제거 :

Here's [how to setup](#-configuration-) //🔧 Configuration 🔧
Here's [how to setup](#configuration) //Configuration

후자의 버전은 TFS Visual Studio의 마크 다운 미리보기에서 온라인으로 작동합니다 .

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