Markdown에서 동일한 문서의 일부에 링크하는 방법은 무엇입니까?


539

나는 큰 Markdown 문서를 작성하고 있으며 문서의 다양한 위치에 대한 링크를 제공하는 정렬 목차를 처음에 배치하고 싶습니다. 어떻게해야합니까?

나는 사용하려고

[a link](# MyTitle)

MyTitle문서 내의 제목은 어디에 있으며 작동하지 않습니다.


1
R Markdown (Rmd)의 경우 stackoverflow.com/questions/12204257/… 에 연결하십시오 .
Etienne Low-Décarie

1
유일한 문제는 MyTitle이 제목이 아니라 해당 문서의 앵커 이름이어야한다는 것입니다 (예 : <a name="MyTitle"> </a>). 그러면 문서의 어느 곳에서나 원본 링크를 사용할 수 있습니다.
userfuser

7
대답은 실제로 대부분의 사람들과 관련이 없습니다. 대신 두 번째 응답 아래 참조 stackoverflow.com/a/16426829/398630
BrainSlugs83

답변:


37

에서 pandoc 이 옵션을 사용하는 경우, --tocHTML을 생산, 내용의 테이블 섹션에 링크 및 섹션 제목에서 목차로 돌아 가기로 제작됩니다. LaTeX, rtf, rst 등과 같은 다른 형식의 pandoc과 비슷합니다.

pandoc --toc happiness.txt -o happiness.html

이 마크 다운 비트 :

% True Happiness

Introduction
------------

Many have posed the question of true happiness.  In this blog post we propose to
solve it.

First Attempts
--------------

The earliest attempts at attaining true happiness of course aimed at pleasure. 
Soon, though, the downside of pleasure was revealed.

이것을 html 본문으로 생성합니다.

<h1 class="title">
    True Happiness
</h1>
<div id="TOC">
    <ul>
        <li>
            <a href="#introduction">Introduction</a>
        </li>
        <li>
            <a href="#first-attempts">First Attempts</a>
        </li>
    </ul>
</div>
<div id="introduction">
    <h2>
        <a href="#TOC">Introduction</a>
    </h2>
    <p>
        Many have posed the question of true happiness. In this blog post we propose to solve it.
    </p>
</div>
<div id="first-attempts">
    <h2>
        <a href="#TOC">First Attempts</a>
    </h2>
    <p>
        The earliest attempts at attaining true happiness of course aimed at pleasure. Soon, though, the downside of pleasure was revealed.
    </p>
</div>

1
고마워, 이것은 내가 필요한 것입니다. Textmate를 사용하여 Markdown을 HTML로 변환하고 pandoc로 전환합니다.
recipriversexclusion

1
당신이 줄 수있는 데모 Pandoc의 tmbundle을 그래서 (매우) 몇 기이가의 tmbundle MultiMarkdown 특정 구문 하이 라이터를 재 - 사용 (pandoc 모드 등 이맥스도있다) Github에서에 시도를. 또한 LaTeX가 아닌 Context와 같은 관련 스크립트가 많이 사용자 정의되었지만 사용자가 원하는대로 스크립트를 변경할 수 있다는 아이디어가 있습니다. 통합을 단순화하기 위해 아마도 git clone가장 낮은 또는 가장 바깥의 tmbundle 디렉토리에 -ed 되어야합니다 ~/Library/Application\ Support/TextMate/Bundles.
응용 프로그램

2
그것은 -1id의 첫 번째 반복 -2, 두 번째 등에 추가 됩니다 .
Applicative

6
pandoc 명령에 --standalone 옵션을 추가하여 실제로 출력 목차 자체를 출력해야한다는 것을 알았습니다. 이 스위치가 없으면 헤더를 #toc 명명 된 앵커에 대한 링크로 만들지 만 실제로 명명 된 앵커 및 유사한 목록을 출력하지는 않습니다.
Duncan Lock

4
이것은 OP의 질문에 대답 할 수 있지만 markdown 에서 어떻게하는지 알고 싶은 사람들에게는 꽤 쓸모가 없습니다. -다음 답변은 훨씬 도움이됩니다.
BrainSlugs83

933

Github는 자동으로 헤더에서 앵커 태그를 구문 분석합니다. 따라서 다음을 수행 할 수 있습니다.

[Custom foo description](#foo)

# Foo

위의 경우 Foo헤더는 이름으로 앵커 태그를 생성했습니다.foo

참고 : #모든 제목 크기에 대해 하나만 #, 앵커 이름과 사이에 공백이없고 앵커 태그 이름은 소문자 여야하며, 다중 Wor경우 대시로 구분해야합니다 . d.

[click on this link](#my-multi-word-header)

### My Multi Word Header

최신 정보

함께 사용할 수 pandoc있습니다.


54
헤더에 "Like this Like"라는 단어가 여러 개 있으면 앵커에서 공백을 하이픈으로 바꿉니다 [just](#like-this-one).
Mogsdad

3
이것은 H1 헤더에만 작동합니까? H2 헤더 (예 : ## Foo)에 연결하는 경우 링크에 두 개의 숫자 부호 (예 : [Foo] (## foo))를 넣어야합니까? 구문이나 광산을 작동시킬 수 없습니다 (추가 숫자 기호 사용).
GrayedFox

7
@GrayedFox, ab H2 header에 대한 링크를 만들려면 ## Foo[이것은 Foo에 대한 링크입니다] (# foo) ... 즉 , 단일 해시, 해시와 소문자-케밥-케이스-이름- 의 헤더
Abdull

4
팁 : Github의 헤더 옆에 표시되는 앵커를 확인하여 각 링크를 가져옵니다. 즉, 특수 문자가 포함되어 있으면 자동으로 제거되고 올바른 링크가 표시됩니다.
Alexander Pacha

2
제목에 숫자가있는 경우는 어떻습니까? # 3. 세 번째 포인트 [Third point] (# 3.-third.point)가 작동하지 않음
Aditya

118

실험을 통해 솔루션을 찾았 <div…/>지만 확실한 해결책은 원하는 위치에 자신의 앵커 포인트를 페이지에 배치하는 것입니다.

<a name="abcde">

이전

</a>

선 당신에게 '링크'에합니다. 그런 다음 마크 다운 링크는 다음과 같습니다.

[link text](#abcde)

문서의 어느 곳 으로든 이동합니다.

<div…/>솔루션은 id속성 을 추가하기 위해 "더미"구분을 삽입하며 이는 페이지 구조를 방해 할 가능성이 있지만 <a name="abcde"/>솔루션은 무해해야합니다.

(추신 : 그것은 앵커 넣어 확인 될 수 있는 , 당신이 링크하고자하는 라인으로 다음과 같습니다 :

## <a name="head1">Heading One</a>

그러나 이것은 Markdown이 이것을 어떻게 처리하는지에 달려 있습니다. 예를 들어 Stack Overflow 응답 포맷터가 이것에 만족합니다!)


2
이 작업을 수행하면 div와 같은 다른 마크 다운 형식이 제거됩니다 ## headers.
2rs2ts

@ user691859 자세히 설명해 주시겠습니까? 아마도 우리는 더 나은 답변을 위해 답변을 업데이트 할 수 있습니다. div를 들여 쓰기 할 때까지 TextMate가 강조 표시를 억제하지만 브라우저에서 볼 수있는 처리 된 마크 다운에는 아무런 문제가 없습니다.
Steve Powell

WriteMonkey에서 나는 앞에 <div/>몇 줄이 있는 텍스트 가 영향을 받는다는 것을 알았습니다 . 대신 전체 div태그 절에 연결하는 텍스트를 래핑 해야하며 실제 HTML을 사용하여 처음부터 동작을 다시 지정해야합니다. 우우.
2rs2ts

6
감사합니다. 궁금한 사람은 GitHub에서 호스트 및 표시 한 Markdown 파일과도 작동합니다.
Alex Dean

2
HTML5와 앞으로 호환 , 나는 대체 추천하고 싶습니다 <a name="head1"/>와 함께 <a id="head1"/>.
binki

74

이것은 오래된 스레드 일 수 있지만 Github에서 마크 다운으로 내부 문서 링크를 만드는 데 사용됩니다 ...
(참고 : 소문자 #title)

    # Contents
     - [Specification](#specification) 
     - [Dependencies Title](#dependencies-title) 

    ## Specification
    Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. 

    ## Dependencies Title
    Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. Example text blah. Example text blah. 
Example text blah. Example text blah. 

좋은 답변을 얻었으므로 답변을 편집했습니다.

내부 링크가 사용하는 타이틀 크기로 만들 수 있습니다 - #, ##, ###, #### 나는 ... 아래에 간단한 예제를 만들어 https://github.com/aogilvie/markdownLinkTest


귀하의 예에서, 링크 태그는 하나의 #만을 갖지만, 링크되는 헤더는 두 개의 ##을 갖습니다. 그들은 동일하지 않아야합니까?
Karim Bahgat

3
좋은 질문. 대답은 '아니오. # in (#dependencies-title)은 Github 마크 다운에 내부 링크임을 알려줍니다. 뒤에 나오는 텍스트는 모든 제목 크기 일 수 있습니다. 다음은 제가 만든 테스트 예입니다 ... https://github.com/aogilvie/markdownLinkTest
Ally

1
이것이 마크 다운의 맛에 달려 있습니까? 마크 다운 편집기에서 제대로 작동하는 것처럼 보이지만 html 또는 pdf로 저장하면 id가 적절한 태그에 추가되지 않습니다. 나는 거기에 앵커를 버리는 것이 좋을 것이지만, 방법이 훨씬 깨끗하고 빠르다.
meteorainer

21

예, markdown이이를 수행하지만 이름 anchor를 지정해야합니다 <a name='xyx'>.

전체 예

이것은 링크를 만듭니다
[tasks](#tasks)

이 문서의 뒷부분에서 이름이 지정된 앵커 (무엇이든)를 만듭니다.

<a name="tasks">
   my tasks
</a>

헤더를 감쌀 수도 있습니다.

<a name="tasks">
### Agile tasks (created by developer)
</a>

13

pandoc 매뉴얼은 식별자를 사용하여 헤더에 연결하는 방법을 설명합니다. 나는 다른 파서에 의한 지원을 확인 하지 않았지만 github에서 작동하지 않는다고 보고되었습니다 .

식별자는 수동으로 지정할 수 있습니다.

## my heading text {#mht}
Some normal text here,
including a [link to the header](#mht).

또는 자동 생성 된 식별자 (이 경우 #my-heading-text)를 사용할 수 있습니다 . 둘 다 pandoc 매뉴얼 에 자세히 설명되어 있습니다 .

참고 : HTML , LaTex , ConTeXt , Textile 또는 AsciiDoc 로 변환 할 때만 작동합니다 .


9

탐색하려는 제목 내에 기호 가 있으면 멋지게 기억해야 할 몇 가지 추가 사항 ...

# What this is about


------


#### Table of Contents


- [About](#what-this-is-about)

- [&#9889; Sunopsis](#9889-tldr)

- [:gear: Grinders](#it-grinds-my-gears)

- [Attribution]


------


## &#9889; TLDR


Words for those short on time or attention.


___


## It Grinds my :gear:s


Here _`:gear:`_ is not something like &#9881; or &#9965;


___


## &#9956; Attribution


Probably to much time at a keyboard



[Attribution]: #9956-attribution

... 일이 좋아 #, ;, &, 그리고 :문자열은 일반적으로 줄무늬 대신 탈출 / 무시되고있다 향하고 내에서, 하나는 또한 사용할 수 있습니다 인용 쉽고 빠르게 사용할 수 있도록 스타일 링크.

노트

GitHub의는 지원 :word:커밋에서 구문, readme 파일 등을 볼 수 요점 using'em가 관심 인 경우 (rxaviers에서 참조).

그리고 거의 모든 곳에서 최신 브라우저에는 십진수 또는 16 진수가 사용될 수 있습니다. 에서 치트 시트 W3 스쿨 입니다 퍼디 편리 CSS 사용하여 특히, ::before또는 ::after기호로 의사 요소 것은 더 스타일이다.

보너스 포인트?

누군가가 제목 내의 이미지와 다른 링크가 어떻게 파싱되는지 궁금해하는 경우를 대비하여 id...

- [Imaged](#alt-textbadge__examplehttpsexamplecom-to-somewhere)


## [![Alt Text][badge__example]](https://example.com) To Somewhere


[badge__example]:
  https://img.shields.io/badge/Left-Right-success.svg?labelColor=brown&logo=stackexchange
  "Eeak a mouse!"

경고

MarkDown 렌더링은 장소마다 다르므로 다음과 같은 것들이 있습니다.

## methodName([options]) => <code>Promise</code>

... GitHub에서 다음과 id같은 요소를 갖습니다 ...

id="methodnameoptions--promise"

... 바닐라 위생으로 인해 id...

id="methodnameoptions-codepromisecode"

... 템플릿에서 MarkDown 파일을 쓰거나 컴파일하려면 한 가지 방법으로 대상 을 지정하거나 제목의 텍스트를 정리하는 것과 같은 다양한 영리한 방법에 대한 구성 및 스크립트 논리를 추가 해야합니다.


9

범용 솔루션

이 질문은 markdown 구현에 따라 다른 답변을 가지고있는 것 같습니다.
실제로, 공식 Markdown 문서는이 주제에 대해 조용합니다.
이러한 경우, 휴대용 솔루션을 원하면 HTML을 사용할 수 있습니다.

헤더 앞이나 같은 헤더 행에 HTML 태그를 사용하여 ID를 정의하십시오.
예를 들어 : <a id="Chapter1"></a>
코드에는 표시되지만 렌더링 된 문서에는 표시되지 않습니다.

전체 예 :

전체 예제 (온라인 및 편집 가능)는 여기를 참조 하십시오 .

## Content

* [Chapter 1](#Chapter1)
* [Chapter 2](#Chapter2)

<div id="Chapter1"></div>
## Chapter 1

Some text here.  
Some text here.
Some text here.

## Chapter 2 <span id="Chapter2"><span>

Some text here.  
Some text here.
Some text here.

이 예제를 테스트하려면 컨텐츠 목록과 첫 번째 장 사이에 공간을 추가하거나 창 높이를 줄여야합니다.
또한 ID 이름에 공백을 사용하지 마십시오.


어 ... 멋져 보였어 그것을 시도, 두 가지 문제 : (1). ## Chapter 1그 위에 열린 줄이 필요합니다. (2). 링크가 작동하지 않습니다 ...
musicformellons

아, 내가 사용한 intellij markdown 플러그인에서는 작동하지 않습니다. 그러나 Macdown 마크 업 편집기에서 작동합니다.
musicformellons

여전히 github에서 테스트되었습니다 : 헤더 위의 열린 줄이 필요하지만 작동합니다.
musicformellons

@musicformellons 오프닝 라인을 사용하지 않고 스팬 태그를 올바르게 닫으시겠습니까? <br><span id="Chapter1"><span>
ePi272314

예, 작동합니다!
musicformellons

7

마크 다운 사양에는 그러한 지시문이 없습니다. 죄송합니다.


어 오! MultiMarkdown 또는 Textile이이를 지원하는지 알고 있습니까? 모든 문서를 MD로 마이그레이션하려고 생각했지만 거래 차단기입니다. 도와 주셔서 감사합니다!
recipriversexclusion

5
"지시"란 무엇을 의미합니까? 정확하게 문제에 대한 다른 해결책이 여기에 게시되었습니다.
Zelphir Kaltstahl

4

Gitlab은 GitLab Flavored Markdown (GFM)을 사용합니다

여기에 "마크 다운 렌더링 된 모든 헤더가 자동으로 ID를 얻습니다"

마우스를 사용하여 다음을 수행 할 수 있습니다.

  • 헤더 위로 마우스 이동
  • 헤더에서 왼쪽으로 보이는 호버 선택기로 마우스를 이동
  • 마우스 오른쪽 버튼을 클릭하여 링크 복사 및 저장

    예를 들어 README.md 파일에는 헤더가 있습니다.

## series expansion formula of the Boettcher function

링크를 제공합니다 :

https://gitlab.com/adammajewski/parameter_external_angle/blob/master/README.md#series-expansion-formula-of-the-boettcher-function

접두사를 제거 할 수 있으므로 여기 링크는 간단합니다

file#header

여기서 의미하는 것은

README.md#series-expansion-formula-of-the-boettcher-function

이제 다음과 같이 사용할 수 있습니다.

[series expansion formula of the Boettcher function](README.md#series-expansion-formula-of-the-boettcher-function)

공백을 하이픈 기호로 바꾸십시오.

라이브 예는 여기


1

kramdown을 사용하면 다음과 같이 작동합니다.

[I want this to link to foo](#foo)
....
....
{: id="foo"}
### Foo are you?

나는 그것이 언급되었다 참조

[foo][#foo]
....
#Foo

효율적으로 작동하지만 전자는 헤더 이외의 요소 또는 여러 단어가있는 헤더의 좋은 대안 일 수 있습니다.


1

코멘트에서 MultiMarkdown이 옵션으로 언급되었으므로.

에서는 MultiMarkdown 내부 링크에 대한 구문은 간단하다.

문서의 제목에이 제목으로 이름을 지정 [heading][]하면 내부 링크가 만들어집니다.

자세한 내용은 다음을 참조하십시오 : MultiMarkdown-5 Cross-references .

상호 참조

자주 요청되는 기능은 Markdown이 외부 링크를 처리하는 것처럼 쉽게 문서 내 링크를 자동으로 처리 할 수있는 기능이었습니다. 이를 위해“Some Text”라는 헤더가있는 경우 [Some Text] []를 교차 링크로 해석하는 기능을 추가했습니다.

예를 들어 [Metadata] []는 # 메타 데이터 (또는 ## 메타 데이터, ### 메타 데이터, #### 메타 데이터, ##### 메타 데이터, ###### 메타 데이터)로 이동합니다.

또는 여러 헤더가 동일한 제목을 갖는 경우를 명확하게하기 위해 선택 사항의 선택적인 레이블을 포함 할 수 있습니다.

### 개요 [MultiMarkdownOverview] ##

이를 통해 [MultiMarkdownOverview]를 사용하여이 섹션을 구체적으로 참조 할 수 있으며 Overview라는 다른 섹션은 참조 할 수 없습니다. 이것은 atx 또는 settext 스타일 헤더와 함께 작동합니다.

헤더에서 사용하는 것과 동일한 ID를 사용하여 앵커를 이미 정의한 경우 정의 된 앵커가 우선합니다.

문서 내의 헤더 외에도 이미지 및 표에 레이블을 제공하여 상호 참조에 사용할 수 있습니다.


0

<a name="">트릭 에 대한 더 많은 스핀 :

<a id="a-link"></a> Title
------

#### <a id="a-link"></a> Title (when you wanna control the h{N} with #'s)

0

위의 답변 외에도

number_sections: trueYAML 헤더에서 옵션 을 설정하는 경우 :

number_sections: TRUE

RMarkdown은 섹션의 번호를 자동으로 매 깁니다.

자동 번호 매기기 섹션을 참조하려면 R 마크 다운 파일에 다음을 입력하십시오.

[My Section]

My Section섹션의 이름은 어디에 있습니까

이것은 섹션 수준에 관계없이 작동하는 것 같습니다.

# My section

## My section

### My section

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