web-dev-qa-db-ja.com

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

以下と同等のマークダウン構文があります。

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

... 

<a name="pookie">this is pookie</a>
446
Synesso
Take me to [pookie](#pookie)

pookieという名前のアンカーポイントにジャンプするには、正しいマークダウン構文を使用する必要があります。

その名前のアンカーポイントを挿入するには、HTMLを使用します。

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

マークダウンは、あなたがアンカーポイントをどこに置くかを気にしないようです。それを置くのに便利な場所はヘッダーにあります。例えば:

### <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=を使用しました。ただし、id=を使用すると、HTML5はJavaScriptでグローバル変数を作成するようになりました。これは必ずしも必要なものではない可能性があります。そのため、name=を使用することは、今ではもっと友好的になるでしょう。

(私にXHTMLを説明してくれた Slipp Douglas 、そしてHTML5の副作用を指摘してくれた nailer に感謝します。詳しくはコメントとnaileranswer をご覧ください。 XHTMLでは非推奨ですが、name=は至るところで動作するようです。

601
Steve Powell

Bitbucket.orgでは、投票された解決策は機能しません。代わりに、(##と共に)ヘッダを使用するとき、それらを#markdown-header-my-header-nameのように接頭辞を付けることによってそれらをアンカーとして参照することが可能です。残りは小文字のヘッダータイトルで、ダッシュはスペースを置き換えます。

## 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ファイルのソースを編集し、アンカーの作成方法を確認します).

66

nameを使用してください。 HTML 5ではidを使用する必要はなく、JavaScriptでグローバル変数を作成します

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

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

名前を使った例

Take me to [pookie](#pookie)

そして目的地のアンカー:

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

元のMarkdown構文でこれを実行するための容易に利用可能な構文はありませんが、 Markdown Extra は少なくともIDをヘッダに割り当てる手段を提供します。簡単にリンクします。また、MarkdownとMarkdown Extraの両方で通常のHTMLを使用することができ、より新しいバージョンのHTMLではname属性がid属性に置き換えられています。

16
You

Markdown Anchorはハッシュマークをサポートしているので、ページ内のアンカーへのリンクは単に[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)へのリンク
11
jeffmcneill

パーティーに遅刻しますが、この追加は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).
5
symbolrush

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

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

どのマークダウンパーサを使用するかによって、アンカーは変わる可能性があります(symbolrushとLa muerte Peludaの答えの例を見てください。それらは異なります)。マークダウンの実装に応じて生成されたアンカーが表示される場合は、こちら のbabelmark を参照してください。

3
Ulysse BN

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

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

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

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

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

`いくつかのテキスト{:name = 'anchorName'}

1
Ryan McGuinness

GitBookでこの問題の解決策を探している人のために。これが私がそれを機能させる方法です(GitBookの中で)。このように、ヘッダに明示的にタグを付ける必要があります。

# My Anchored Heading {#my-anchor}

それからこのアンカーにこのようにリンクしてください

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

解決策と追加の例はここにあります: https://seadude.gitbooks.io/learn-gitbook/

0
keyoxy