マークダウンで、ページのフラグメント、つまり#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 2018
1

回答:


165

この回答を参照してください。

要約すると、目的地を

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

マークダウンマークアップの任意の場所に挿入(たとえば、ヘッダー:

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

マークダウンリンケージを使用してリンクします。

[This is the link text](#headin)

または

[some text](#sometext)

使用しないでください<div>。これにより、多くのレンダラーのレイアウトが混乱します。

(私は上記に変更id=しましたname=。退屈な説明については、この回答を参照してください。)


7
+1、ありがとう。これが自動的に行われないのは残念です。非常に湿った私見。
マルク=アンドレ・Lafortune

それは、あなたがテキストエディタでそれを読まなければならないとき醜いですが、ない仕事を。なぜこれが受け入れられない答えなのかわからない。
kayleeFrye_onDeck 2016年

古いスタイルのアンカーの定義<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

MarkdownPHPバージョンでは、次のいずれかのような構文を使用して、ページ内のヘッダーをフラグメント識別子にリンクすることもできます。

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

## Header 2 ##      {#header2}

その後

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

残念ながら、この構文は現在ヘッダーでのみサポートされていますが、少なくとも目次を作成するのに役立ちます。


3

HTMLページ内のリンクの宛先アンカーは、id属性を持つ任意の要素にすることができます。W3Cサイトのリンクを参照してください。関連するセクションからの引用は次のとおりです。

HTMLドキュメントの宛先アンカーは、A要素(name属性で名前を付ける)または他の要素(id属性で名前を付ける)のいずれかで指定できます。

MarkdownはHTMLをHTMLとして扱うため(インラインHTMLを参照)、任意の要素からフラグメント識別子を作成できます。たとえば、段落にリンクする場合は、段落を段落タグで囲み、IDを含めます。

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

次に、標準のMarkdown [My link](#mylink)を使用して、フラグメントアンカーへのリンクを作成します。これは、余分なマークアップの必要がないため、HTMLをクリーンに保つのに役立ちます。


私の経験では<p>、Markdownでタグを使用すると、通常の段落のCSSを削除できます。注意して使用したいと思います。Markdownは初めてですが、いくつかの癖があります。
2rs2ts

@ user691859「<p>Markdownでタグを使用すると、通常の段落のCSSが削除される可能性がある」という意味がわかりません。マークダウンは段落を<p>タグで囲み、すでに<p>タグが付いているものは無視します。これがCSSにどのように影響するかわかりません...
Mike

私の振る舞いは不安定です。Tumblrでは、<p>を使用すると、(常にではありませんが)指定した特定の動作以外のすべての動作を取り除くことができます。何故かはわからない。<div>常に同じことを行います。
2rs2ts

3

Visual Studio Team Foundation Server(TFS)2015を使用している人にとっては、少なくともヘッダーの埋め込み要素<a><div>要素は本当に好きではありません。また、ヘッダーの絵文字も好きではありません。

### 🔧 Configuration 🔧

Lorem ipsum problem fixem.

に翻訳されます:

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

そしてリンクはどちらかそれを使用する必要がありますのでid(壊したこの Visual Studioで、その他のプレビュー拡張)、または絵文字を削除します。

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.