マークダウンの相互参照(名前付きアンカー)


回答:


692
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
StackOverflowがHTMLをレンダリングした後は、そのヘッダーデモにリンクする方法がわかりません。レンダリングされたHTMLが<a>タグを削除しているためです。つまり、StackOverflow Markdownを使用することはできません。
Slipp D. Thompson 2012

2
ただし、これは他のよりリベラルなMarkdownレンダラーでも機能しますが、<a>終了タグが必要になります。<A>タグが自動閉鎖することはできません。また、<a>タグがヘッダーのコンテンツの前にない限り、ブラウザーがヘッダーをスキップすることがわかりました。例に加えられた修正。
Slipp D. Thompson 2012

2
カウボーイ <a>hrefなしでにスタイリングがないからといって、それが自動的に閉じるという意味ではありません。私がまったく正気でない限り、これらの両方:test-xhtml11と[ sln.6bitt.com/public/test-html5.html](test-html5)は、<a>タグ内の残りのページをレンダリングします。先に進んで、選択したWebインスペクターで検査してください。
Slipp D. Thompson 2012

4
@Slipp:わかりました、わかりました。あなたがコーディング<a id="hi"/> rest of docしたが、それはのように扱われた<a id="hi"> rest of doc</a>。(そして、ページの要素分析もこれを示しています。)私の間違い:生のソースではなく表示された要素を見ました。この観察に照らして、答えは変更されるべきだと思いますか?
スティーブパウエル

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]」というテキストを追加します。
Binary Phile 2016年

8
Githubでは## My paragraph title、次のアンカーが生成されるため、user-content-my-paragraph-title[Some text](#user-content-my-paragraph-title)で参照できます。ただし、これに関する公式のドキュメントは見つかりませんでした。
toto_tico

これはBitbucketでも私を助けました-魅力のように動作します。
スコットバイヤーズ2016

1
これは有用な情報です。ありがとうございました。ただし、拡張機能のないマークダウンレンダラーはこれらのアンカーを生成しません。また、見出し名が衝突すると、アンカーIDが衝突します(または数値のサフィックスなど、役に立たない区別のトリックが発生します)。明示的なアンカーIDの方が優れており、制御が容易で、テキストの更新によるランダムな変更の影響を受けず(上記のトリックを参照)、ヘッダーだけではなくアンカーに役立ちます。一般に、両方の手法が必要です。
Steve Powell

stackedit.io [linky](#header)十分なアンカーだった、とあまりにも、要旨を公開したときに働いていました。
フェリペアルバレス

67

を使用しnameます。idHTML 5ではを使用する必要はなく、JavaScriptでグローバル変数を作成します

HTML 5仕様の5.9.8フラグメント識別子への移動 -との両方idname使用するを参照してください。

ほとんどのブラウザがIDをグローバル変数に変換することを知っておくことは重要です。こちらが簡単なテストです。name回避策を使用すると、グローバルの作成と、発生する可能性のある競合を回避できます。

名前を使用した例:

Take me to [pookie](#pookie)

そして、宛先アンカー:

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

5
反対投票。とにかくJSでグローバル変数を(直接)定義してはならないため、グローバル変数の引数は弱いので、競合は起こりません。また、の意味論nameとはid異なっています。
Marnen Laibow-Koser 2014

9
@ MarnenLaibow-Koser JSでのグローバル変数の定義について誰も議論していません。HTMLでIDを作成すると、ほとんどのブラウザでグローバルなwindow.someidが作成されます。
mikemaccana 2014

14
@ MarnenLaibow-Koser多くのライブラリ(つまり、独自のJSではなく他のJSのライブラリ)では、fineuploaderなどの単一のグローバルを使用します。IDの要素を作成するとfineuploaderfineuploaderモジュールを使用できなくなります。不要なグローバルを作成しないことで、これらの競合を回避できます。
mikemaccana 2014

5
その場合のテストをいくつか実行して、どれが優先されるかを調べたいと思います。私は理論的な問題に感謝しますが、長年にわたるクライアント側の開発では、クライアント側のJSをIDで壊すことはありませんでした(HTMLが他の方法で有効だった場合)。実際に問題が発生するまで、意味的に適切な場合は使用し続けます。
Marnen Laibow-Koser 2015

2
@ MarnenLaibow-Koser私(および他の多く)は、実際のJavaScriptを壊すHTML IDを持っています-返信しているコメントに非常に実用的な例が1つあります!シングルトンであっても常にクラスを使用する多くのスタイルガイドや会社があり、これが理由です。
mikemaccana 2016年

17

Markdown Anchorはハッシュマークをサポートしているため、ページ内のアンカーへのリンクは単に[Pookie](#pookie)

アンカーの生成は、実際にはGruber Markdownではサポートされていませんが、Markdown Extraなどの他の実装ではサポートされています。

Markdown Extraでは、アンカーIDはでヘッダーまたはサブヘッドに追加され{#pookie}ます。

Gitリポジトリページ(Gistsではない)のGithubフレーバーマークダウンは、すべてのヘッダー(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/にあります。


ありがとう!これは機能します!これは賛成されるべきです!
デクスター

ベストアンサー!ありがとう
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

最新のMarkdownを使用すると、次の構文を使用できるはずです。

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

これにより、次のHTMLが作成されます。

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

アンカーにテキストを含める場合は、角括弧内にアンカーテキストを追加します。

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


Marukuこの構文について知っているだけのようです。バベルマークを参照してください。
Ulysse BN

3

最も一般的なマークダウンジェネレーター。各ヘッダーに簡単な自己生成アンカーがあります。たとえばpandocの場合、生成されるアンカーはヘッダーのケバブケーススラグになります。

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

使用するマークダウンパーサーに応じて、アンカーは変化する可能性があります(シンボルラッシュの例を挙げれば、La muerte Peludaの回答が異なります!)。マークダウンの実装に応じて生成されたアンカーを確認できるこのバベルマークを参照してください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.